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()方法(首选方法) ...
随机推荐
- NOI全国赛(2001)--食物链
今天写了道并查集的题,看来并查集的题刷少了,,,,,用法好神奇啊!!!开三倍并查集 用i表示自己,i+n存天敌,i+2*n存可以克制de,再逻辑判断一下即可. 所以,要意识到并查集的分类处理可以开不同 ...
- X-Scan使用教程
下载X-Scan扫描器,解压缩,双击Xscan_gui.exe即可运行,不需要安装.X-Scan采用多线程的方式,对指定主机或者网段进行扫描. 其扫描功能(插件)有: 开放服务:扫描TCP端口状态,根 ...
- LinkedHashSet的概述和使用
LinkedHashSet的特点: 可以保证怎么存就怎么取 package online.msym.set; import java.util.LinkedHashSet; public class ...
- 基于原生js的返回顶部组件，兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- java设计模式（1）
设计模式定义 设计模式原则 设计模式分类 常用设计模式 (一)设计模式定义 设计模式是针对软件设计中普遍存在的各种问题,所提出的解决方案. 换句话说,设计模式是一套被反复使用,多数人知晓的.经过分类的 ...
- flex中为控件添加监听器并计算
1.添加监听器: public function moduleCreationComplete():void { this.D601_29a.addEventListener(FlexEvent.SE ...
- 批量安装python库函数---pip
废话少说,要的就是干货 pip install -r 文件名 注意如果输入文件名报错,建议使用文件的绝对路径. 作者:marsggbo
- QQ登陆接口
这次做了一个QQ登陆接口---简单记录一下 遇到一大坑-----QQ互联里面添加应用的时候,是网站应用,配置回调地址一定要配置 准确,到指定回调页面 否则会出现问题的.
- vue2.0自定义指令的使用方法
感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...
- div内部元素居中
要让div内部元素垂直居中,则给div加上此css样式: .div-vertical-middle{ height:200px; width:304px; line-height:50px; ...