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

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

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()方法(首选方法) ...

随机推荐

iPhone 设置铃声
每次设置后,长时间不玩就忘记了,把写成博客:好记性不如烂笔头: 第一步:下载喜欢的音乐: 第二步,通过iTunes 文件下的资料库导入刚才下载的歌曲: 第三步:截取喜欢的部分,铃声最好设置在30秒 ...
Mongo-Connector 安装及使用文档
# Mongo-Connector 安装及使用文档 ------ > * 工具介绍> * 安装前准备> * 安装步骤> * 命令详解> * 有可能的坑> * 其他文 ...
Docker建立本地Registry
从容器运行一个Registry # docker run -p : registry 查看yelinyuntest/static_web镜像 # docker images yelinyuntest/ ...
数据库DML操作（DCL了解）
DQL:SELECT * FROM 表名DML(数据操作语言,它是对表记录的操作(增.删.改)!)1. 插入数据* INTERT INTO 表名(列名1,列名2, ...) VALUES(列值1, 列 ...
模拟jquery链式访问
一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...
数位dp——hud3652
B-number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...
一步操作配置Word环境
我们在开始编辑Word文档的时候,会发现有些事情我们总需要预先操作一下,比如100%普通视图.显示隐藏特殊标记.显示标尺.最大化窗口.显示导航窗格啥的,每次去操作,感觉很烦,那么通过下面这个宏代码可以 ...
hdu 1757 A Simple Math Problem (构造矩阵解决递推式问题)
题意:有一个递推式f(x) 当 x < 10 f(x) = x.当 x >= 10 f(x) = a0 * f(x-1) + a1 * f(x-2) + a2 * f(x-3) + ...
input是否checked与使用jquery的attr或prop方法无关
最近在项目中有这样一个需求,用户在下单时可以选择优惠券,也可取消选择,并且可以多次选择,取消. 这是一个典型的input标签checked功能,博主使用radio元素实现此需求,但是优惠券只能选中,不 ...
C语言本身并不提供输入输出语句
C语言本身并不提供输入输出语句,输入和输出操作是由函数来实现的.在C标准函数库中提供了一些输入输出函数,例如,printf函数和scanf函数.在使用他们时,千万不要误认为他们是C语言提供的“输入输出 ...

jquery按钮绑定特殊事件