阻止JS事件冒泡传递(cancelBubble 、stopPropagation)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>

<!DOCTYPE html>
<html>
<head>
<title> 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)</title>
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" />
<script>
function doSomething(obj, evt) {
alert(obj.id);
var e = (evt) ? evt : window.event;
if (window.event) {
e.cancelBubble = true; // ie下阻止冒泡
} else {
//e.preventDefault();
e.stopPropagation(); // 其它浏览器下阻止冒泡
}
}
</script>
</head>
<body>
第一种情况:
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
  <p>This is parent1 div.</p>
  <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
    <p>This is child1.</p>
  </div>
  <p>This is parent1 div.</p>
</div>


<br />

第二种情况:
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
  <p>This is parent2 div.</p>
  <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
    <p>This is child2. Will bubble.</p>
  </div>
  <p>This is parent2 div.</p>
</div>
</body>
</html>

 

效果:

技术分享

第一种情况:点击橘黄色一栏,alert("child1"),alert("parent1")

      点击黄色部分,alert("parent1")

第二种情况:点击灰色浅色部分,alert("child2")

      点击剩余部分,alert("parent2")

也就是说,第二种情况,使用了event.cancelBubble()=true阻止了冒泡排序。

 

-------------------------

<html>
<body>
<table border="1" onclick="alert(‘table‘);">
<tr onclick="alert(‘tr1111‘);">
<td>第一个</td>
</tr>
<tr onclick="test(event);">
<td>哈哈</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
function test(event)
{
alert("哈哈tr");
event.cancelBubble = true;
}
</script>

冒泡排序,触发子元素时候,事件会由子元素一级级传递到父元素上,父元素也会触发事件。

所以如果使用event.cancelBubble=true能阻止事件的向上传递,也就阻止了冒泡排序。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。