如下测试代码:
<style type="text/css"> #div{border: 1px solid red; 500px;} #p1,#p2{border: 1px solid red;} </style>
<div id="div" onclick="clickDiv()"> 我是外层DIV <p id="p1" onclick="clickP1(event);">我是P1 阻止事件冒泡</p> <p id="p2" onclick="clickP2();">我是P2 未阻止事件冒泡</p> </div>
JS阻止事件冒泡代码:
<script type="text/javascript"> function clickDiv(){ alert("我是外层DIV"); } function clickP1(e){ alert("p1 阻止事件冒泡"); e.stopPropagation(); } function clickP2(){ alert("p2 未 阻止事件冒泡"); } </script>
jQuery阻止事件冒泡代码:
$(function(){ $("#div").click(function(){ alert("我是外层DIV"); }) $("#p1").click(function(event){ alert("p1 阻止"); event.stopPropagation(); }) $("#p2").click(function(){ alert("p2 未阻止"); }) })
有时候点击提交按钮会有一些默认事件。比如表单提交(submit)
可通过event.preventDefault();阻止默认行为
$("input[type='submit']").click(function(event){ //在这里可以加入一些逻辑判断 以决定是否阻止默认行为 event.preventDefault(); })
PS:很多文章都提到下面代码
function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { //阻止默认浏览器动作(W3C) e.preventDefault(); } else { //IE中阻止函数器默认动作的方式 window.event.returnValue = false; } return false; }先判断浏览器是否IE浏览器,本人的是IE9 无需判断 照样可以阻止事件冒泡。
对此问题不解... 不知道大家是人云亦云呢,还是我的方法不对