通过自定义方法修正mouseover/mouseout事件

Javascript中mouseover/mouseout 事件冒泡停止失效解决办法中我们通过checkHover()方法解决在触发mouseover和mouseout事件的时候无法阻止事件分发的bug。

通过这个方法我们成功的解决了这个问题,但是这个方法是用起来还是比较麻烦。在每次调用相关的方法的时候你都要去检查一下,让我们代码多了很多重复无用的代码。点击查看Demo效果 继续阅读 »

转载请注明原文出处《通过自定义方法修正mouseover/mouseout事件》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

Javascript下拉菜单以及实现方法

Blog上要用到一个下拉菜单,网上这方面的例子很多,但是手头闲着没什么事情,就自己写了一个,顺便写一下自己在做的时候的思路,检查一下自己同时也与大家分享。大家先看Dorplist演示效果

要实现的目标很简单就是一个两级的下拉菜单.具体一点就是在已有的HTML代码的基础上按照不唐突的原则实现下拉列表。

主要的容易出问题的地方就是mouseover和mouseout事件分发问题这个在前面的一篇文章中已经说过了。 继续阅读 »

转载请注明原文出处《Javascript下拉菜单以及实现方法》 如无特别声明,所有文章均遵守创作共用 署名-非商业-禁止演绎 3.0协议。

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协议。