[转]jquery对事件冒泡的处理方法
2012-08-22 10:52
176 查看
原文地址:/article/5707811.html
1.什么是事件冒泡:
页面上有好多事件,也可以多个元素响应一个事件.假如:
上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是:a --> div --> body 。a冒泡到div冒泡到body
2.事件冒泡引发的问题。
本来在上面的代码中只想触发<a>元素的onclick事件,然而<div>,<body>事件也同时 触发了。因此我们必须要对事件的作用范围进行限制。当单击<a>元素的onclick事件时只触发<a>本身的事件。由于IE- DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递,我们可以用 event.stopPropagation()阻止事件的传递行为.
3.jQuery对这个问题进行了必要的扩展和封装.
4.阻止默认行为
网页中的某些元素是有自己的默认行为的,比如果超链接单节后需要跳转,提交按钮点击后需要提交表单,有时需要阻止这些行为,也就是默认行为。
jquery中可用用preventDefault()的方法来阻止元素的默认行为.
5.jquery中对冒泡和默认行为的阻止方法同样也可以改写,改写后能够达到同样的效果
event.preventDefault(); 改写为: return false;
event.stopPropagation(); 改写为: return false;
PS:推荐大家不要图省事,任何时候都写return false;
一般情况下都是需要阻止默认行为。不要阻止事件冒泡。
1.什么是事件冒泡:
页面上有好多事件,也可以多个元素响应一个事件.假如:
<BODY onclick="alert('aaa');"> <div onclick="alert('bbb');"> <a href="#" class="cooltip" title="这是我的超链接提示1。" onclick="alert('ddd');"> 提示 </a> </div> </BODY>
上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是:a --> div --> body 。a冒泡到div冒泡到body
2.事件冒泡引发的问题。
本来在上面的代码中只想触发<a>元素的onclick事件,然而<div>,<body>事件也同时 触发了。因此我们必须要对事件的作用范围进行限制。当单击<a>元素的onclick事件时只触发<a>本身的事件。由于IE- DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递,我们可以用 event.stopPropagation()阻止事件的传递行为.
3.jQuery对这个问题进行了必要的扩展和封装.
$("element").bind("click",function(event){ //event为事件对象 //......... event.stopPropagation(); //停止事件冒泡 });
4.阻止默认行为
网页中的某些元素是有自己的默认行为的,比如果超链接单节后需要跳转,提交按钮点击后需要提交表单,有时需要阻止这些行为,也就是默认行为。
jquery中可用用preventDefault()的方法来阻止元素的默认行为.
$('#submit').bind('click',function(event){ var username = $('#username').val(); if(username==""){ alert('用户名不能为空!'); event.preventDefault(); //阻止默认行为 } })
5.jquery中对冒泡和默认行为的阻止方法同样也可以改写,改写后能够达到同样的效果
event.preventDefault(); 改写为: return false;
event.stopPropagation(); 改写为: return false;
PS:推荐大家不要图省事,任何时候都写return false;
一般情况下都是需要阻止默认行为。不要阻止事件冒泡。
相关文章推荐
- jQuery中处理事件冒泡的方法和取消后续内容的方法
- jquery对事件冒泡的处理方法
- jquery 停止事件冒泡方法
- jquery技巧总结-jQuery对象,集合,方法扩展,事件处理,特效,解决冲突
- jquery技巧总结-jQuery对象,集合,方法扩展,事件处理,特效,解决冲突
- jQuery的live()方法对hover事件的处理示例
- jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
- jQuery中阻止冒泡事件的方法介绍
- jquery阻止事件冒泡的两种方法
- JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)
- javascript事件冒泡实例详解和jquery阻止事件冒泡的两种方法
- Jquery 中为后生成或插入的 Html 元素先设定响应事件处理方法
- js处理一个div里面多个点击事件时出现的事件冲突 重复的解决方法 事件冒泡
- JQuery设置onclick事件无效的处理方法
- jQuery 的 live() 方法对 hover 事件的处理
- Jquery事件处理方法
- jquery技巧总结-jQuery对象,集合,方法扩展,事件处理,特效,解决冲突
- jquery的冒泡事件的阻止与允许(三种实现方法)
- jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
- Asp.net 更改Alert样式和后台注册Jquery的Ajax异步提交事件[包括处理前操作、处理后操作(注明:此方法只是作为参考,如有需要可自行修改)]