js阻止冒泡及jquery阻止事件冒泡示例介绍

最新推荐文章于 2021-07-09 17:11:36 发布

zxf13717561643

最新推荐文章于 2021-07-09 17:11:36 发布

阅读量368

点赞数

分类专栏： HTML5 文章标签： jquery js 阻止事件冒泡

HTML5 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

js阻止冒泡
在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。

复制代码代码如下:

 
 function stopPro(evt){  
 
 var e = evt || window.event;  
 
 //returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，  
 
 //可以取消发生事件的源元素的默认动作。  
 
 //window.event?e.returnValue = false:e.preventDefault();  
 
 window.event?e.cancelBubble=true:e.stopPropagation();  
 
 }

或者：

复制代码代码如下:

 
 function cancelBubble(e) {  
 
 var evt = e ? e : window.event;  
 
 if (evt.stopPropagation) {  
 
 //W3C  
 
 evt.stopPropagation();  
 
 }  
 
 else {  
 
 //IE  
 
 evt.cancelBubble = true;  
 
 }

JQuery 提供了两种方式来阻止事件冒泡。
方式一：event.stopPropagation();

复制代码代码如下:

 
 $("#div1").mousedown(function(event){  
 
 event.stopPropagation();  
 
 });

方式二：return false;

复制代码代码如下:

 
 $("#div1").mousedown(function(event){  
 
 return false;  
 
 });

Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。
例如：

复制代码代码如下:

 
 $("a").click(function(event){  
 
 event.preventDefault(); //阻止默认动作即该链接不会跳转。  
 
 alert(4);//但是这个还会弹出  
 
 event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用  
 
 return false;//不仅阻止了事件往上冒泡，而且阻止了事件本身  
 
 });

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
场景应用：Google 和百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
Jquery案例：

复制代码代码如下:

 
 <script src="js/jquery-1.4.3.js"></script>  
 
 <script type="text/javascript">  
 
 $(function(){  
 
 $("#aa").click(function(event){  
 
 alert("aa");  
 
 event.preventDefault();  
 
 event.stopPropagation();  
 
 alert(3);  
 
 });  
 
 $("#ee").click(function(){  
 
 alert("ee");  
 
 });  
 
 $("a").click(function(event){  
 
 event.preventDefault();  
 
 alert(4);  
 
 event.stopPropagation();  
 
 return false;  
 
 });  
 
 });  
 
 </script>  
 
 </head>  
 
 <body>  
 
 <div id="ee">  
 
 aaaaaaa  
 
 <input id="aa" type="button" value="test" />  
 
 <a href="http://baidu.com">baidu.com</a>  
 
 </div>  
 
 </body>

js案例：

复制代码代码如下:

 
 function tt(){  
 
 alert("div");  
 
 }  
 
 function ttt(){  
 
 var e = arguments.callee.caller.arguments[0] || window.event;  
 
 window.event?e.returnValue = false:e.preventDefault();  
 
 alert(3);  
 
 window.event?e.cancelBubble:e.stopPropagation();  
 
 alert(4);  
 
 }  
 
 </script>  
 
 </head>  
 
 <body>  
 
 <div onclick = "tt();">  
 
 ccccc  
 
 <a href="http://baidu.com" οnclick="ttt();">baidu.com</a>  
 
 </div>