JavaScript事件冒泡和阻止默认行为和阻止事件冒泡(转载)
2010-02-28 21:39 爱研究源码的javaer 阅读(685) 评论(0) 编辑 收藏 举报<div id="container2" onclick="alert('click container2');">
<a href="http://www.google.com" target="_blank" onclick="fn1(event);">Google</a>
<a href="http://www.google.com" target="_blank" onclick="fn2(event);">Google</a>
<a href="http://www.google.com" target="_blank" onclick="fn3(event);">Google</a>
<a href="http://www.google.com" target="_blank" onclick="fn4(event);">Google</a>
</div>
</div>
alert('click google');
}
function fn2(event) {
alert('click google');
event.preventDefault();
}
function fn3(event) {
alert('click google');
event.stopPropagation();
}
function fn4(event) {
alert('click google');
event.preventDefault();
event.stopPropagation();
}
点击第一个链接,alert_google -> alert_container2 -> alert_container1 -> open_google_page
点击第二个链接,alert_google -> alert_container2 -> alert_container1
点击第三个链接,alert_google -> open_google_page
点击第四个链接,alert_google
可以看到,事件冒泡是从最初引发事件的HTML节点开始,一步步向上引发父节点的相同事件。
在Firefox中,我们可以通过 preventDefault 函数阻止默认的行为(比如这个例子中,点击链接的默认行为是打开链接地址)
通过 stopPropagation 函数阻止事件冒泡。
相同的过程在IE下的实现有点不同,一是事件对象(event)在IE下是作为 window 对象的一个属性,
二是阻止事件的默认行为或阻止事件冒泡的做法也有所不同,请看:
2. 观察IE下的事件冒泡
<div id="container2_ie" onclick="alert('click container2');">
<a href="http://www.google.com" target="_blank" onclick="fn1_ie();">Google</a> <a
href="http://www.google.com" target="_blank" onclick="fn2_ie();">Google</a>
<a href="http://www.google.com" target="_blank" onclick="fn3_ie();">Google</a> <a
href="http://www.google.com" target="_blank" onclick="fn4_ie();">Google</a>
</div>
</div>
alert('click google');
}
function fn2_ie() {
alert('click google');
event.returnValue = false;
}
function fn3_ie() {
alert('click google');
event.cancelBubble = true;
}
function fn4_ie() {
alert('click google');
event.returnValue = false;
event.cancelBubble = true;
}
点击第一个链接,alert_google -> alert_container2 -> alert_container1 -> open_google_page
点击第二个链接,alert_google -> alert_container2 -> alert_container1
点击第三个链接,alert_google -> open_google_page
点击第四个链接,alert_google
转自:http://www.cnblogs.com/sanshi/archive/2009/02/18/1393165.html