您的位置:首页 > Web前端 > JavaScript

JS阻止事件冒泡

2014-01-16 17:57 309 查看
如下测试代码:

<style type="text/css">
#div{border: 1px solid red;width: 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 无需判断

照样可以阻止事件冒泡。

对此问题不解... 不知道大家是人云亦云呢,还是我的方法不对
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: