阻止事件冒泡

HTML事件冒泡与阻止

最新推荐文章于 2025-04-21 14:42:07 发布

转载最新推荐文章于 2025-04-21 14:42:07 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuzhongwusan/archive/2008/12/27/1363419.html

本文详细解析了HTML中事件冒泡的机制，通过实例展示了如何使用cancelBubble和stopPropagation来阻止事件冒泡，以及它们之间的区别。适用于解决AJAX应用中不同层事件干扰的问题。

在html中触发的事件会往上冒泡,直到最上层.比如

Click me, twice alert

源码:

<div onclick="alert('div is clicked')">

<a onclick="alert('a is clicked'); return false;" href="#">Click me, twice alert</a>

</div>

点击click,会弹出两个alert提示框.
防止触发上层div的方法是在点击时事件中加上:event.cancelBubble=true;
如下:

Click me, Once alert

源码:

<div onclick="alert('div isn\'t clicked')">

<a onclick="alert('a is clicked'); event.cancelBubble=true;return false;" href="#">Click me, Once alert</a>

</div>

这种做法是从Bret Taylor的blog上面抄来的，原文地址在这里（好像是，不是也别怪我。）。对于避免ajax应用中不同层的事件干扰很有用的。

先说一下“取消(cancel)”和“停止(stop)”的区别:说白了，停止就是当事件发生后，阻止它自动冒泡到父容器内；而取消则是当冒泡发生到父容器之后停止，也就是不在当前元素中响应。天哪，这东西说起来话长了，代码说话：

js 代码

Js代码

function stopEvent(e) {
if (!e) e = window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
var link = document.getElementById("link");
link.onclick = stopEvent;

以上这一段是阻止父容器事件的

js 代码

Js代码

function cancelEvent(e) {
if (!e) e = window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
var link = document.getElementById("link");
link.onclick = function(e) {
cancelEvent(e);
stopEvent(e);
}

以上这一段是阻止子元素事件的

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2008/12/27/1363419.html