JavaScript 阻止事件冒泡的跨浏览器实现方案

Firefox 与 IE 兼容性问题

在处理事件冒泡问题时，网上常见的代码往往难以直接应用，尤其在 Firefox 浏览器中，直接使用 e.stopPropagation() 可能无法生效。但测试发现，Firefox 支持 e.cancelBubble = true 的写法，且实际可行。本文将此代码整理分享，以便后续使用。IE 旧版本的兼容性尚未测试，待实际应用时再行完善。

// 取消事件冒泡
function stopBubble(e) {
var evt = (e) ? e : window.event; // 兼容 Firefox
evt.cancelBubble = true; // evt.stopPropagation(); 在 Firefox 下阻止冒泡，据说可用
};

DOM Event 对象方法说明

补充说明：

1、cancelBubble（HTML DOM Event 对象属性）：若希望事件句柄阻止事件传播到包容对象，必须将该属性设为 true。

2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，当前节点上处理该事件的处理程序将被调用，事件不再分派到其他节点。

3、preventDefault（HTML DOM Event 对象方法）：通知浏览器不要执行与事件关联的默认动作。

示例代码： function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true }

将上述 stopBubble(e) 函数嵌入到需要阻止事件冒泡的函数内部，即可实现阻止事件冒泡的功能。