jQuery阻止向上冒泡事件

来源：互联网发布：安卓版微信营销软件编辑：程序博客网时间：2024/06/06 12:38

<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $('.one').click(function(e,v){ alert('one'); });　　　　　　　　　　　　 $('.two').click(function(e,v){ 　 alert('two'); //阻止起泡取消下面的注释 e.stopPropagation();//或者使用这种方式//return false;}); $('.three').click(function(e){ alert('three'); //阻止起泡取消下面的注释  e.stopPropagation();  //或者使用这种方式//return false;}); }); </script> </head><body><div class="one" style="width:300px;height:300px;background:yellow;">   1111   <div class="two" style="width:200px;height:200px;background:green;">      2222       <div class="three" style="width:100px;height:100px;background:grey;">          3333       </div>   </div></div></body></html>

可以在这里在线调试
：http://www.w3cschool.cc/try/try.php?filename=tryjquery_hide

没看懂的继续向下看。

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.事件冒泡引发的问题。

本来在上面的代码中只想触发元素的onclick事件，然而

,事件也同时触发了。因此我们必须要对事件的作用范围进行限制。当单击元素的onclick事件时只触发本身的事件。由于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;
参考：
http://www.cnblogs.com/zhujie/archive/2011/02/11/1951533.html
http://www.jb51.net/article/34914.htm

0 0