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

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

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

随机推荐

Python中三种基本结构的语句
选择语句 if 条件判断 : # 条件可以加括号也可以不加括号 -- else: -- Python中没有switch语句这是可以使用if exp:.... elif exp:来代替 if 判断条件1 ...
用Qemu搭建aarch32学习环境
作者信息作者: 彭东林邮箱: pengdonglin137@163.com QQ: 405728433 软件平台主机: Ubuntu14.04 64位版本模拟器:Qemu-2.8.0 Linu ...
JvisualVM、JMC监控远程服务器
修改服务器上jmxremote.access与jmxremote.password,输入命令: find -name jmxremote.access进入该jmxremote.access文件所在目录 ...
js,jq获取元素位置属性及兼容性写法
网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐和其他浏览器 document.body.scrolltop //ie,谷歌浏览器和没有 ...
B/S(Web)实时通讯解决方案
B/S的实时通讯实现起来比较麻烦,因为http协议是无状态的,导致一些实时消息通知和聊天等功能比较难以实现,本文主要简述几种自己之前常用的几种方式. 1.传统的HTTP协议是无状态的传统的HTTP协 ...
老李秘技：LoadRunner支持参数文件极限是多大
老李秘技:LoadRunner支持参数文件极限是多大 Controller不支持参数文件大于20m
js对象个人理解及记录
什么是对象对象的定义是:无序属性的集合,其属性可以包括基本值.对象或函数. var car = {}; //比如我们拿一块铁造了一辆车,这的名字叫car /建一个空对象 car.length = ...
C++（浅析枚举类型-enum）
枚举类型枚举类型(enumeration)是C++中的一种派生数据类型,它是由用户定义的若干枚举常量的集合. 如果一个变量只有几种可能的值,可以定义为枚举(enumeration)类型.所谓&quo ...
let 和 const 关键字
看了阮老师的ES6入门再加上自己的一些理解整理出的学习笔记 let关键字跟var相比,不会提升为全局变量,始终是块级作用域{} 注意点: 1: 不能在同一个块级作用域内声明同名变量 2: (如果当前 ...
Redis分布式锁
Redis分布式锁分布式锁是许多环境中非常有用的原语,其中不同的进程必须以相互排斥的方式与共享资源一起运行. 有许多图书馆和博客文章描述了如何使用Redis实现DLM(分布式锁管理器),但是每个库都 ...

jquery按钮绑定特殊事件