您的位置：首页 > 其它

阻止事件的冒泡

2015-07-28 23:01 711 查看

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.8.0.min.js"></script>

</head>

<body>
<div style="width: 300px;height: 300px;background-color: aqua">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>

</body>

<script type="text/javascript">
$(document).ready(function(){
/*点击div时，body绑定的事件也被执行，*/
$("body").bind("click",bodyHandler);
$("div").bind("click",divHandler);
$("div").bind("click",divHandler2);
})

function divHandler(event){
conlog(event)
event.stopPropagation();/*阻止父级body的事件发生，*/
//event.stopImmediatePropagation();/*阻止其他所有的事件发生*/

}

function bodyHandler(event){
console.log("hello");
conlog(event)
}

function divHandler2(event){
console.log("hello");
conlog(event)
}

function conlog(event){
console.log(event);
}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 事件冒泡

相关文章推荐

新的分享

章节导航