jQuery阻止事件传播
来源:互联网 发布:中国最后一个太监知乎 编辑:程序博客网 时间:2024/05/16 12:51
要删除之前已经分配给一个标签的事件,jQuery的unbind()允许做到这一点。要使用它,首先创建一个jQuery对象,带有想要从其上删除事件的元素。然后,添加unbind()函数,传递给它一个带有事件名称的字符串。例如,如果想要阻止类为tabButton的所有标签响应任何click事件,可以这么编写:
$('.tabButton').unbind('click');
看一下这个简短的脚本,来了解unbind()函数是如何工作的。
$('a').mouseover(function(){ alert('You moved the mouse over me!'); }); $('#disable').click(function(){ $('a').unbind('mouseover'); });
第1行到第3行为页面上所有的链接(<a>标签)的mouseover事件添加了一个函数。把鼠标光标移动到链接上,会打开一个带有消息“You moved your mouse over me!”的警告框。然而,由于警告消息的频繁出现可能会令人厌烦,第4行到第6行允许访问者关闭警告框。当访问者单击带有ID为disable的一个标签的时候(例如,一个表单按钮),mouseover事件会从所有的链接删除,并且警告框不再出现。
阻止一个事件传播
Internet Explorer和W3C的事件模型都得到了Firefox、Safari和Opera的支持,这使得事件传递超出了初次接收事件的元素的范围。例如,假设要把一个事件辅助函数分配给一个特定链接的click事件,当单击该链接的时候,click事件触发,函数运行。然而,这个事件并没有在这里停止。每个祖先元素(标签包围着单击的元素)也可以响应同样的单击。因此,如果给包含该链接的一个<div>标签分配一个click事件辅助函数,用于该<div>标签的事件的函数也会运行。
这一概念叫做事件冒泡(event bubbing),意味着多个元素可以响应同一个操作。这里有个例子:假设为一幅图像添加了一个click事件,以便单击图像的时候,一幅新的图像会取代它。该图像位于一个<div>标签中,我们也给该标签分配了一个click事件。在这个例子中,当单击<div>的时候,会出现一个警告框。现在,当单击图像的时候,这两个函数都会运行。换句话说,即便单击了图像,<div>也接收到了click事件。
你可能不会经常遇到这种情况,但是遇到的时候,结果就会令人不安。假设在前面的例子中,当单击图像的时候,我们不希望<div>做任何事情。在这个例子中,我们必须阻止click事件传递到<div>标签上,而又不会妨碍处理图像的单击事件的函数执行。换句话说,当单击图像的时候,分配给图像的click事件的函数会替换一幅新的图像,然后就停止click事件。jQuery提供了一个名为stopPropagation()函数来阻止事件传递到一个祖先标签上。这个函数是事件对象的一个方法,因此,在一个事件处理函数中访问它:
$('#theLink').click(function(evt){ //do something evt.stopPropagation();//stop event from continuing });转载请注明出处:http://uphtm.com/js/135.html
- jQuery阻止事件传播
- jQuery 阻止事件传播及事件冒泡
- JQuery中的事件冒泡和阻止事件的传播行为
- 阻止事件传播
- jquery阻止子元素触发父级事件的传播
- 阻止冒泡,阻止一个事件传播
- 阻止默认行为和阻止事件传播
- js 如何阻止事件传播
- JS 传播事件、取消事件默认行为、阻止事件传播
- 细说 jQuery - 事件传播
- js阻止冒泡事件继续传播
- JS阻止事件的传播行为
- stopPropagation()方法阻止事件的向上传播?
- jQuery阻止事件冒泡
- Jquery 阻止事件冒泡
- 阻止jQuery事件冒泡
- 阻止jQuery事件冒泡
- jquery阻止事件冒泡
- HDU 1099 Lottery (数学问题模拟)
- FFmpeg深入分析之零-基础
- Linux 安装C++ HTTP JSON客户端
- Json串和字符串转换的工具类
- iphone app上架archive时 验证失败解决 This bundle is invalid.
- jQuery阻止事件传播
- DataSet的组成
- Android设备传感器相关
- android:descendantFocusability用法简析
- 写给只用百度却觉得感觉良好的人
- Lua快排
- s5pv210 uboot-2012-10移植(一) 之分析Alex Ling的linaro-2011.10 for mini210
- 正则表达式的作用
- 【Unity】技巧集合