Created by Jerry Wang, last modified on Oct 10, 2014
测试代码：
<html>
<script src="C:\Users\i042416\Desktop\jquery_1.7.1.js">
</script>
<script>
$(document).ready(function() {
$("#test").click( function (){
alert("four");
//return false;
});
});
function iamtwo(e) {
alert("two");
//stopBubble(e);
}
function iamthree(e) {
alert("three");
//stopBubbleDefault(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );
}
function stopBubbleDefault(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );
evt.preventDefault();
}
</script>
<body>
<div οnclick="alert('outermost');">Outermost
<div οnclick="alert('middle');"> middle
<div οnclick="alert('inner');">inner</div>
<div οnclick="iamtwo(event)">two</div>
<p><a href=" www.baidu.com" οnclick="iamthree(event)">three </a></p>
<p id="test"><a href=" www.baidu.com">four</a></p>
</div> <!-- end of middle !-->
</div> <!-- end of outermost !-->
</body>
</html>
UI上有6个元素:
点击Outermost: 弹出outermost字样的alert dialog
点击middle: 依次弹出middle，outermost的dialog
点击inner: 依次弹出inner, middle，outermost的dialog
点击two: 依次弹出two, middle，outermost的dialog
点击three: 依次弹出three, middle，outermost的dialog， 然后navigate到baidu webpage
点击four: 依次弹出four, middle，outermost的dialog， 然后navigate到baidu webpage
如果不希望two元素点击的event 冒泡到其parent hierarchy去，可将click handler iamtwo里的stopBubble行注释取消，之后点击就只会出现two dialog:
对于tag a 元素three，如果要阻止浏览器navigate到baidu website这一默认行为，需要调用event的preventDefault()方法:
如果是采用jQuery的click方法绑定的事件处理，只需在事件处理函数里返回false即可:
\
\