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

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

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

随机推荐

用Qemu搭建aarch32学习环境
作者信息作者: 彭东林邮箱: pengdonglin137@163.com QQ: 405728433 软件平台主机: Ubuntu14.04 64位版本模拟器:Qemu-2.8.0 Linu ...
iOS开发之自定义UITableView的cell
系统默认的UITableViewCell的每行都有横线(分隔符),就算没有数据也是如此,有时候我们想只在有数据的地方有下划线,可以去除下划线,然后在awarkFromNid方法中使用addsubvie ...
PuTsangTo-单撸游戏开发04 给角色添加基本动画
一. 跳跃与移动的优化与完善先给上一次的内容做一次补救,也就是上一次中还留存的,由于键盘按键事件的第一次回调与后续回调之间会间隔个小半秒带来的跳跃落地后动作延迟的情况. 最终的键盘按下回调的处理代码 ...
使用VSCode 断点调试 js项目，html页面
一.效果目的 1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码: 二.工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Deb ...
老李分享：Uber究竟是用什么开发语言？ 1
老李分享:Uber究竟是用什么开发语言? poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...
C++学习笔记之模板篇
title: C++学习笔记之模板篇 tags: c++,c,模板,vector,friend,static,运算符重载,标准模板 --- 一.模板不管是函数模板还是类模板,在未初始化前都是不占用内 ...
WPF 中使slide控件拖动完成后改变变量值
这个问题一开始觉得还是挺简单的,网上也看到不少解决方案. 首先一个最简单最直接的方案就是自定义一个名为FinalValue的依赖属性.随后重载OnThumbDragCompleted函数,在Thumb ...
nlog学习使用
最近有不少朋友推荐我用NLog.我以前都是自己写txt的文本输出log,以前别人用log4net的时候看那个配置文件,看得我一阵烦,我比较喜欢约定胜于配置的组件.这次玩了一波NLog,,相当不错.一下 ...
Android IPC机制全解析<二>
在AIDL文件中并不是所有的数据类型都可以使用,AIDL支持的数据类型如下: 基本数据类型(int.long.char.boolean.double等) String和CharSequence Lis ...
Html 经典布局（一）
经典布局案例(一): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

jquery按钮绑定特殊事件