Javascript中mouseover/mouseout事件冒泡停止失效解决办法

大家在写javascript交互脚本的时候最常用到的应该就是事件了,在处理事件的时候需要值得注意的是事件流的问题,事件流有三种模型:MSIE的冒泡模型,Natscape Navigator 的捕获型事件流,以及W3C标准中的同时支持捕获和冒泡两种模型。大部分现代浏览器都支持W3C的标准事件流模型,遗憾的是MSIE仍然只支持自己的冒泡模型。我们这里讨论的不是事件流的模型,这里只是简单的提一下,这篇文章要讨论的是mouseover和mouseout在停止冒泡或者说是停止派发事件后仍然继续触发的问题,也就是事件冒泡停止失效问题(这个名字是我自己起的,我也不是很清楚为什么会失效,是本身就这么设计的还是小bug?)。

我们在写下拉菜单或者小提示等效果的时候会用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件。点击mouseoverout测试1,当你的鼠标在红框与绿框之间移动的时候你会看见mouseover和mouseout事件疯狂的在触发。为什么会这样呢?因为内部的Div在鼠标移上的时候会向它的父对象派发事件,所以外面的框相当于也触发了mouseover事件。
继续阅读 »

转载请注明原文出处《Javascript中mouseover/mouseout事件冒泡停止失效解决办法》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。