提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js冒泡、捕获事件及阻止冒泡方法详细总结

JS事件方法 详细 总结 捕获 阻止 冒泡
2023-06-13 09:15:26 时间
javascript,jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。

事件冒泡是一个从子节点向祖先节点冒泡的过程；

事件捕获刚好相反，是从祖先节点到子节点的过程。

给一个jquery点击事件的例子：

代码如下：
复制代码代码如下:

<!DOCTYPEhtml>
<metacharset="utf-8">
<title>test</title>
<head>
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
<scripttype="text/javascript">
$(function(){
$("#clickMe").click(function(){
alert("hello");
});
$("body").click(function(){
alert("baby");
});
});
</script>
</head>
<body>
<divstyle="width:100px;height:100px;background-color:red;">
<buttontype="button"id="button2">clickme</button>
<buttonid="clickMe">click</button>
</div>
</body>
</html>

事件冒泡现象：点击“id=clickMe”的button,会先后出现“hello”和“baby”两个弹出框。

分析：当点击“id=clickMe”的button时，触发了绑定在button和button父元素及body的点击事件，所以先后弹出两个框，出现所谓的冒泡现象。


事件捕获现象：点击没有绑定点击事件的div和“id=button2”的button,都会弹出“baby”的对话框。


在实际的项目中，我们要阻止事件冒泡和事件捕获现象。

阻止事件冒泡方法：

法1：当前点击事件中returnfalse;
复制代码代码如下:

$("#clickMe").click(function(){
alert("hello");

returnfalse;
});

法2：
复制代码代码如下:
$("#clickMe").click(function(event){
alert("hello");

vare=window.event||event;

if(e.stopPropagation){//如果提供了事件对象，则这是一个非IE浏览器
e.stopPropagation();
}else{
//兼容IE的方式来取消事件冒泡
window.event.cancelBubble=true;
}
});

貌似捕获事件不能被阻止

相关文章