JavaScript停止冒泡和阻止浏览器默认行为

来源：互联网发布：淘宝子账号编辑：程序博客网时间：2024/06/05 07:12

* JavaScript停止冒泡和阻止浏览器默认行为 *

JQuery 提供了两种方式来阻止事件冒泡，Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作，下文有个不错的示例，需要的朋友可以参考下

1.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;     }}

2.  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" onclick="ttt();">baidu.com</a> </div>

阅读全文

0 0