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

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

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

随机推荐

vue学习笔记样式 class style（五）
使用v-bind数据绑定class和style,v-bind:class可以与传统的class属性共存,其中可以用{}设置多个class,根据条件判断的语法是class名:条件,带-的class名需要 ...
css基本布局
一.一列布局关键代码: { width:960; margin:0 auto: } 代码: 运行结果: 分析:以上代码实现一列布局,头部占整个浏览器 ...
python之pymysql模块学习（待完善...）
pymysql介绍 pymysql是在python3.x版本中用于连接mysql服务器的一个库.python2中则使用mysqldb. 安装方法: pip install pymysql 使用实例: ...
String 类的实现（2）深度拷贝详解
我们已经知道了浅拷贝存在的问题,即多次析构同一空间.这个问题是类的成员函数引起的,就是前面浅拷贝里相当于编译器自动合成的函数,确切的说,浅拷贝里的问题是由隐士拷贝构造函数和隐士赋值运算符引起的. 拷贝 ...
老李谈JVM内存模型
老李谈JVM内存模型 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨 ...
老李分享：《Java Performance》笔记1——性能分析基础 1
老李分享:<Java Performance>笔记1——性能分析基础 1.性能分析两种方法: (1).自顶向下: 应用开发人员通过着眼于软件栈顶层的应用,从上往下寻找性能优化的机会. ...
Oracle to_date函数
TO_DATE格式(以时间:2007-11-02 13:45:25为例)Year: yy two digits 两位年显示值:07yyy three di ...
Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能
日常啰嗦前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
使用react native制作的一款网络音乐播放器
使用react native制作的一款网络音乐播放器基于第三方库 react-native-video设计"react-native-video": "^1.0.0&q ...
串口屏与触摸屏人机界面组态软件HMIMaker介绍
串口屏与触摸屏人机界面组态软件HMIMaker介绍触摸屏人机界面组态软件HMIMaker,是一款基于ARM架构的嵌入式控制系统开发的嵌入式软件,专业应用于触摸屏的二级界面开发,具有单片机协议,mod ...

jquery按钮绑定特殊事件