jquery按钮绑定特殊事件
本文主要介绍点击一个按钮处理事件的一些特殊情况和技巧。
一、第一次点击触发一个函数，之后点击都触发另一个函数
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()方法(首选方法) ...
随机推荐
- MyEclipse下打开ftl文件
转:http://blog.csdn.net/w410589502/article/details/51669028 1.Freemarker模板的文件后缀名 2.Freemarker其实是一种比 ...
- smm框架学习------smm框架整合实现登录功能(一)
一.准备所需的jar包 1.1所需jar包 1.Spring框架jar包 2.Mybatis框架jar包 3.Spring的AOP事务jar包 4.Mybatis整合Spring中间件jar包 5.a ...
- Node.js开发工具、开发包、框架等总结
开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢.2.做些小型项目用Sublime Text.3.Browserif ...
- 多线程图像处理中对选入DC的位图保护
我在应用多线程加速图像处理(具体参见图像处理的多线程计算)的过程中,曾遇到过一个线程同步的问题.多线程对图像不同子块进行处理,再合成.结果发现最终不是全部子块都处理成功,有的子块好像没有被处理.而且发 ...
- PHPSTORM下安装XDEBUG
本文不是教程安装XDEBUG,具体的请自行百度(我也是按照百度上的一步步来的). 以下纠正几点目前我安装时查看播客的不对之处: 1. Setting > PHP > DEBUG > ...
- 如何把phpStorm打造成自己的专属IDE
1.如何设置phpStorm的默认编码,例如UTF-8?phpStorm的编码分为IDE Encoding 和Project Encoding,设置方法是打开File->Setting-> ...
- 填坑实录 Android Studio 利用 ADB WIFI 插件实现真机无线调试
总是用模拟器,小破本的渣内存无法承受,同时模拟器的版本大多停在4.4,无法体现Android 5.0.6.0 的版本特性,因此决定利用 Android Studio 的插件实现真机无线调试. 步骤如下 ...
- 老李分享：Mac快捷键
poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...
- Python多线程Selenium跨浏览器测试
前言 在web测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动化测试前,我们总是苦逼的在一台或多台机器上安装N种浏览器,然后手工在不同的浏览器上验证主业务流程和关键功能模块功能,以检测不同浏 ...
- 实现简单的跨站脚本攻击（XSS）
我们来通俗的了解一下什么是跨站脚本攻击(XSS):在表单中提交 一段 js代码 ,提交的内容被展示到页面时 ,js会被浏览器解析 打个比方吧,比如我现在写的这篇博客,写完以后我要发表对吧? 发表这个过 ...