event.cancelBubble=true 取消事件处理

<tr><a href="xxx">连接</a></tr>

如上结构,单击tr的时候跳转至另一页面

<tr style="cursor:pointer" onmouseover="this.style.backgroundColor='gainsboro'" onmouseout="this.style.backgroundColor=''" onclick="return Click();">

 

    function Click() {
        window.location.href = "xxx";
    }

 

<a href="xxx">连接</a> 可更改为<a href="xxx" onclick="event.cancelBubble=true">连接</a>

这样可以避免单击a标签的同时也跳转至另一页面。onclick="event.cancelBubble=true" 取消事件处理。

否则单击a的同时会跳转另一页面。

解析:

取消事件冒泡,在 IE 的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的单击事件;event.cancelBubble=true;可以停止事件继续上传

补充一点,Ie的事件传递是从下到上的:

事件来源对象->上级对象->上上级对象->.....->body->document->window

NS的事件传递是从上到下:

window->document->body->....->事件来源对象

(event.returnValue=false 设置事件的返回值为false,即取消事件处理)

posted @ 2013-01-15 11:10  Good_Code  阅读(11147)  评论(1编辑  收藏  举报