本文主要介绍点击一个按钮处理事件的一些特殊情况和技巧。

一、第一次点击触发一个函数，之后点击都触发另一个函数

1、小白实现

2、大神实现

代码如下：

<body>

<button>click me</button>

    <script>

    function bind(func1, func2) {

        let func = null

        return function() {

            (!func ? (func = func2, func1) : func).apply(this, arguments)

        }

    }

    $('button').click(bind(()=>{alert(1)}, ()=>{alert(2)}));

    </script>

</body>

说明2点：

1、let定义的变量是块级的变量。

while(1){

    let let1 = 2;

    var var1 = 2;

}

alert(let1);  //不可访问

alert(var1);  //可以访问

2、(func = func2, func1)

javascript 逗号表达式，从左到右执行每个子表达式，并将最后一个子表达式的值作为整个表达式的值。=优先级高于，（点击了解更多）。所以这个表达式先将func2赋给func，然后整个表达式的值取func1。

二、点击按钮只调用一次事件处理

1、实现

同样也可以通过判断全局变量flag为是否为true来处理。

这里介绍一个jquery的one方法。

$("button").one("click", function() {

    alert("This will be displayed only once.");

});

了解更多可参考：http://www.jquery123.com/one/

原理就是当第一次触发以后，我们就立即删除该句柄。

// 注意：前提是我们已经定于好了addEvent/removeEvent函数

// (定义好了才能使用哦)  

var myIntro = document.getElementById('intro');

addEvent(myIntro, 'click', oneClickOnly);

function oneClickOnly() {

    alert('WOW!');

    removeEvent(myIntro, 'click', oneClickOnly);

}

2、实际应用

场景：工作中有遇到这种情况，如下，点“系统消息”代表全部系统消息都读了。

之前做的就是click时调用readMsg()，事实上这样每点击一次就会触发请求一次接口，可以通过只点击一次来优化页面性能。

   //在点击系统消息tab的时候置为已读

   $("li[data-href='tabs02'] h2").one("click", function() {

      readMsg("sys", "all");

    });

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/6394424.html有问题欢迎与我讨论，共同进步。

jquery按钮绑定特殊事件的更多相关文章

jquery批量绑定click事件
jquery批量绑定click事件: var selects = $(".public_select dd ul li"); debugger; /*$(".public ...
jQuery之绑定焦点事件（焦点事件失效）
在使用jQuery绑定事件时,若某个事件不存在,则该事件后绑定的事件均失效: 如图所示,若失去焦点事件checkEmail不存在, 会导致后面的事件checkMobile,和事件checkBirth ...
ios 设备用jquery live绑定 click 事件不管用
问题描述:用js拼接的html追加到页面,然后用 live 绑定click事件不起作用解决办法:1.直接在标签写onclick事件 2.给需要绑定的标签添加css样式{cursor:pointe ...
jQuery on 绑定的事件触发多次
jquery用on绑定事件,在代码执行过程中,可能会遇到多次执行的情况. 解决方案是在on的事件前面加上一个off,再on. $('#btnBind').off('click').on('click' ...
jquery中绑定click事件重复执行问题
jquery中单击事件重复多次执行的问题使用如下方式: $('#sub').unbind('click').click(function () { ... });
jQuery on 绑定的事件执行两次
$(".class1").on("click",".class2",function(){ alert('提示'); }); 上面代码,怎么 ...
JQuery调用绑定click事件的3种写法
第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello Wor ...
jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数
1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...
jQuery的4种事件绑定方法
jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...

随机推荐

ubuntu查看安装的cuda toolkit自带的工具及其他安装文件
原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5253672.html 1.查看工具默认目录为:local,进入local:cd /usr/loc ...
说说JAVA之网络编程 - 爬虫
首先总结一下学习过程中所需要的类: URL类 - openConnection() URLConnection类 - connection() getInputStream() BufferedRea ...
[LeetCode] Decode String 题解
题目题目 s = "3[a]2[bc]", return "aaabcbc". s = "3[a2[c]]", return " ...
英伟达CUVID硬解，并通过FFmpeg读取文件
虽然FFmpeg本身有cuvid硬解,但是找不到什么好的资料,英伟达的SDK比较容易懂,参考FFmpeg源码,将NVIDIA VIDEO CODEC SDK的数据获取改为FFmpeg获取,弥补原生SD ...
SSH里面使用jQuery的ajax
今天我真的很兴奋!在我的SSH项目中用jQuery的异步传输成功了,经过一天多的奋战,大工告成! 我的项目需求是在javascript中向我的controller(即:action)中传输form表单 ...
java程序包不存在
当把classpath和path设置好之后. 自己写了个类的,然后放在test_package\mypackage路径下.主函数要用到.但是却出错了. 我一开始怀疑自己的classpath配置错了,在 ...
MYSQL数据库-SELECT详解
将SQL文件导入数据库中 $ source /url/file_name.sql ======================================================= S ...
Java位向量的实现原理与巧妙应用
Java位向量的巧实现原理与巧妙应用 1.博文介绍本篇博文将会介绍几本的位运算含义.位向量介绍.BitSet实现原理.Java位向量的应用.拓展介绍Bloom Filter等. 2.位运算介绍 1) ...
MCDownloader(iOS下载器)说明书
示例前言很多iOS应用中都需要下载数据,并对这些下载的过程和结果进行管理,因此我才有了写这个MCDownloader的想法.在IOS 文件下载器-MCDownloadManager这篇文章中,我使 ...
python urllib模块
1.urllib.urlopen(url[,data[,proxies]]) urllib.urlopen(url[, data[, proxies]]) :创建一个表示远程url的类文件对象,然后像 ...

jquery按钮绑定特殊事件