jQuery阻止向上冒泡事件

最新推荐文章于 2022-04-21 08:55:58 发布

mylomen

最新推荐文章于 2022-04-21 08:55:58 发布

阅读量3.8k

点赞数

分类专栏： javaWeb 文章标签： jquery 向上冒泡

javaWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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();   //阻止默认行为

   }

})