Created by Jerry Wang, last modified on Oct 10, 2014

测试代码：

</div><div data-lake-id="fbb43b4dd756729699498fc5a418be63">

</div><div data-lake-id="5fb1ccc531cde16c52996898546051e8">$(document).ready(function() {</div><div data-lake-id="9dfa88df1b6b9883b495691068c07cec"> $("#test").click( function (){</div><div data-lake-id="8754b97832d967b62d6659f6db6309ef"> alert("four");</div><div data-lake-id="a77db0f2b042185e7dba0e1d0b465f12"> //return false;</div><div data-lake-id="926a13941e9c4cb33bc69f1d8f429231"> });</div><div data-lake-id="45826a8bfad6e76bc3ce53828b44a035">});</div><div data-lake-id="2bed17e1beb5210c545c75ceb9055c9b">function iamtwo(e) {</div><div data-lake-id="18d7c3bb02da404d358d56e7723783ea">  alert("two");</div><div data-lake-id="ed0fde0c675f9127fc20b101f40391ff">  //stopBubble(e);</div><div data-lake-id="9a9054e929b34ff8c1f542a2b9a96052">}</div><div data-lake-id="a50cbb73216f50f07d23ae1d7803e427">function iamthree(e) {</div><div data-lake-id="70c085d327ab35ca5f7b3148b759895c">  alert("three");</div><div data-lake-id="301c8b68ef6b0b9fda2a983382184ae9">  //stopBubbleDefault(e);</div><div data-lake-id="38f2b13cbc08eb80357902ed3c5e0ee0">}</div><div data-lake-id="2b5774fe54360f7e0d05893f829c518b">function stopBubble(e) {</div><div data-lake-id="6c478ff009453c172f545b623ce77965">    var evt = e||window.event;</div><div data-lake-id="16f6d19a83af46a3f357b8229e51f036">    evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );</div><div data-lake-id="e8306b07bfbe9465866fef75e828ef2d">}</div><div data-lake-id="f4d2a3e0010011492f4167099f7e36cf">function stopBubbleDefault(e) {</div><div data-lake-id="e8606ddccfda7974026b93ba713be2b7">    var evt = e||window.event;</div><div data-lake-id="82a01436158bba976334d474d6641079">    evt.stopPropagation?evt.stopPropagation():( evt.cancelBubble = true );</div><div data-lake-id="cd05fade227a17ed7f9a8ddeec3542a9">    evt.preventDefault();</div><div data-lake-id="7370019b7eb72fab82666cdc61aa7394">}</div><div data-lake-id="a8af68638b1352d3349dcf3a5d52b609">

Outermost

 

middle

   

inner

 

two

 

http://www.baidu.com" οnclick="iamthree(event)">three

 

http://www.baidu.com">four

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即可: