您的位置：首页 > Web前端 > JQuery

JQuery取消事件冒泡

2017-04-23 16:34 288 查看

该效果是当你点击bigdiv是弹出big 当你点击smalldiv是弹出small并不会弹出bigdiv

代码如下<!DOCTYPE html>
<html>
<head>

<title>2.html</title>

<style type="text/css">
#bigid {
width: 300px;
height: 300px;
border: 1px solid red;
}
#smallid {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){

$("#bigid").click(function(){
alert("big");
});

$("#smallid").click(function(event){
alert("small");
event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}

});

});

</script>
</head>

<body>
<div id="bigid">big
<div id="smallid">small</div></div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航