JQuery取消事件冒泡
2017-04-23 16:41
225 查看
该效果是当你点击bigdiv是弹出big 当你点击smalldiv是弹出small并不会弹出bigdiv
代码如下
[java] view
plain copy
<!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>
代码如下
[java] view
plain copy
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery中处理事件冒泡的方法和取消后续内容的方法
- jquery取消事件冒泡的三种方法(推荐)
- jQuery取消事件冒泡
- JQuery取消事件冒泡
- JQuery中 取消后续事件的执行，取消事件冒泡
- jquery取消事件冒泡的三种方法
- jquery防止事件冒泡和取消默认行为案例
- jquery 事件代理中的 取消冒泡传递
- jquery取消事件冒泡和取消默认行为
- 事件的绑定与取消和事件流的冒泡与捕获
- jQuery 文本框事件绑定与取消代码
- Jquery——Day3（事件对象+事件冒泡+默认行为阻止）
- 取消事件冒泡
- jquery中取消和绑定hover事件的实现代码
- jQuery 阻止事件冒泡和默认行为
- iOS上的jQuery.on()冒泡事件绑定 以及 iOS绝对定位元素中的输入框
- jquery如何获取事件_冒泡
- jquery 点击元素以外任意地方隐藏该元素的方法(事件冒泡)
- JQuery事件冒泡机制与解决
- 取消事件冒泡