先上代码:
<div id='outer' onclick='alert("我是outer")'> <div id="middle" onclick='alert("我是middle")'> <div id="inner" onclick='myBubble(arguments[0]);alert("我是inner")'><a onclick='myDefault()' id='dd' href="http://www.baidu.com">js事件</a></div> </div> </div> <script> function myBubble(e){ var e=e||window.event; e.stopPropagation?e.stopPropagation():(e.cancelBubble=true); } function myDefault(e){ var e=e||window.event;//IE if(e.preventDefault)//标准 { e.preventDefault(); } else if('returnValue' in e )//IE,如果判断条件设成e.returnValue,在IE8及以下版本不识别,本例中点击后会跳转 { e.returnValue=false; } return false; //处理使用对象属性注册的处理程序 } </script>
上面的代码效果:仅弹出提示窗口“我是inner”。
如果去掉dd中的myDefault函数,则:我是inner>>跳转到百度首页。
如果将上面的两个函数都去掉:我是inner>>我是middle>>我是outer>>跳转到百度首页。
上面的例子主要涉及到事件冒泡和取消默认行为两个方面。