jQuery中off()方法函数的使用,单击一次,响应了两次
来源:互联网 发布:excel 数据收集 编辑:程序博客网 时间:2024/06/05 05:48
项目在测试阶段,页面中有这么一个bug,绑定的单击事件,单击一次,却触发了两次单击的响应。
网上搜了一下相关的资料,发现是js中绑定的事件太多了,使用的是 .on(),在这里需要使用 .off()进行解绑即可。
off()
函数用于移除元素上绑定的一个或多个事件的事件处理函数。
off()
函数主要用于解除由on()函数绑定的事件处理函数。
该函数属于jQuery
对象(实例)。
语法
jQuery 1.7 新增该函数。其主要有以下两种形式的用法:
用法一:
jQueryObject.off( [ events [, selector ] [, handler ] ] )
用法二:
jQueryObject.off( eventsMap [, selector ] )
参数
events
),属性值对应绑定的事件处理函数(参数handler
)。selector可选/String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null
或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。handler可选/Function类型指定的事件处理函数。off()
函数将会移除当前匹配元素上为后代元素selector
绑定的events
事件的事件处理函数handler
。
如果省略参数selector
,则移除为任何元素绑定的事件处理函数。
参数selector
必须与通过on()函数添加绑定时传入的选择器一致。
如果省略参数handler
,则移除指定元素指定事件类型上绑定的所有事件处理函数。
如果省略了所有参数,则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。
返回值
off()
函数的返回值为jQuery类型,返回当前jQuery对象本身。
实际上,off()
函数的参数全是筛选条件,只有匹配所有参数条件的事件处理函数才会被移除。参数越多,限定条件就越多,被移除的范围就越小。
示例&说明
请参考下面这段初始HTML代码:
<input id="btn1" type="button" value="点击1" /><input id="btn2" type="button" value="点击2" /><a id="a1" href="#">CodePlayer</a>
首先,我们为上述button和<a>元素绑定事件,然后使用off()
函数解除事件绑定,相应的代码如下:
function btnClick1(){ alert( this.value + "-1" );}function btnClick2(){ alert( this.value + "-2" );}var $body = $("body");// 为所有button元素的click事件绑定事件处理函数btnClick1$body.on("click", ":button", btnClick1 );// 为所有button元素的click事件绑定事件处理函数btnClick2$body.on("click", ":button", btnClick2 );//为所有a元素绑定click、mouseover、mouseleave事件$body.on("click mouseover mouseleave", "a", function(event){ if( event.type == "click" ){ alert("点击事件"); }else if( event.type == "mouseover" ){ $(this).css("color", "red"); }else{ $(this).css("color", "blue"); }});// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2// 点击按钮,btnClick1照样执行$body.off("click", ":button", btnClick2);// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)// 点击按钮,不会执行任何事件处理函数// $body.off("click", ":button");// 注意: $body.off("click", "#btn1"); 无法移除btn1的点击事件,off()函数指定的选择器必须与on()函数传入的选择器一致。// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数// 点击按钮或链接,都不会触发执行任何事件处理函数// $("body").off("click");// 移除body元素为所有元素的任何事件绑定的所有处理函数// 点击按钮,或点击链接或者鼠标移入/移出链接,都不会触发执行任何事件处理函数// $("body").off( );
运行代码(其他代码请自行复制到演示页面运行)
此外off()
函数还可以只移除指定命名空间的事件绑定。
var $btn1 = $("#btn1");$btn1.on("click.foo.bar", function(event){ alert("click-1");});$btn1.on("click.test", function(event){ alert("click-2");});$btn1.on("click.test.foo", function(event){ alert("click-3");});$btn1.off("click.test"); // 移除click-2、click-3// $btn1.off("click.foo"); // 移除click-1、click-3// $btn1.off("click.foo.bar"); // 移除click-1// $btn1.off("click"); // 移除所有click事件处理函数(click-1、click-2、click-3)// $btn1.off(".foo"); // 移除所有包含命名空间foo的事件处理函数,不仅仅是click事件
原文链接:http://www.365mini.com/page/jquery-off.htm
- jQuery中off()方法函数的使用,单击一次,响应了两次
- 使用iscroll滑动区域内的div onclick事件单击一次触发了两次问题的解决
- 使用iscroll滑动区域内的div onclick事件单击一次触发了两次
- iscroll滑动区域内的div onclick事件单击一次触发了两次bug解决
- Asp.Net Repeater中使用Button控件并响应单击操作的方法
- 快速两次单击事件导致两次单击事件和一次单击事件的产生问题的处理
- Jquery中使用$append出现添加两次及Jquery对象多次使用的方法
- 点击一次TreeListNode,响应了两次NodedChanged事件
- a链接绑定了 onclick 事件,单击事件中是history.go 单击两次才能后退的原因
- firefox浏览器下,A标签单击一次,提交了两次访问请求
- android-单击事件的响应方法
- jQuery中解除引用的代码执行两次的方法
- 滑动条/块响应消息WM_HSCROLL导致OnHScroll函数执行了两次的问题
- 滑动条/块响应消息WM_HSCROLL导致OnHScroll函数执行了两次的问题
- jquery的off方法,让onclick失效
- 使用EasyUI的datagrid时onLoadSuccess方法执行了两次
- 找出数组中只出现一次的数字,其它数字都出现了两次,及其扩展
- jQuery.off() 函数详解
- 算法_02_BFPRT
- 银行金额小写转大写
- RNN和LSTM推导与实现
- 学习笔记 学习jvm 原理 最基本概念(编译与运行概念)
- mysql中整数类型后面的数字,是不是指定这个字段的长度?比如int(11),11代表11个字节吗?
- jQuery中off()方法函数的使用,单击一次,响应了两次
- 参数化-excel(ADO方式)
- Swift学习笔记(15)——属性
- DataURL, Blob, File, Image之间的关系与转换
- Ajax页面缓存问题分析与解决办法
- Vue 报错 Failed to resolve filter
- Kth Smallest Numbers in Unsorted Array(分别使用快排、归并、快选三种方法)
- React bind selcet
- XML技术(一)