js阻止冒泡及jquery阻止事件冒泡示例介绍
发布时间:2020-12-14 23:22:47 所属栏目:资源 来源:网络整理
导读:js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容。 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle
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" onclick="ttt();">baidu.com</a> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |