Created
November 15, 2015 11:06
-
-
Save skylying/040622218eef12ce93ea to your computer and use it in GitHub Desktop.
stopPropagation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"> | |
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312"> | |
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment