一个取消事件的简单js例子(事件冒泡与取消默认行为)

先上代码：

<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;//IEif(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>>跳转到百度首页。

上面的例子主要涉及到事件冒泡和取消默认行为两个方面。