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

JS如何防止事件冒泡

2016-08-21 18:48 351 查看
<div style="height:30px;line-height:30px;background:#FF0;text-align:center;" id="zz"><a href="http://www.baidu.com">阻止事件冒泡</a></div>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
}

$('zz').onclick = function(e){
$('zz').innerHTML += ",事件已经点击了!";
var e = e||window.event;
if (e.stopPropagation)
{

e.stopPropagation();    // 阻止冒泡
e.preventDefault();        // 阻止默认事件
}
else
{
e.cancelBubble =true;    // 阻止冒泡
e.returnValue = false;    // 阻止默认事件
}

}
document.documentElement.onclick = function(e){
$('zz').innerHTML += ",冒泡没阻止成功!";
}
</script>


e.preventDefault();
这句话怎么理解。组织默认事件是什么意思。html元素中有很多元素是具备默认事件的,a标签会跳转,submit会自动提交,reset会重置表单。
e.preventDefault()会阻止这些默认操作。

重要提醒,阻止叶子节点的冒泡意思最大,或者说儿子节点的阻止冒泡比阻止长辈节点的意义更加重大。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: