IE6/7下面mouseover和mouseout鼠标事件的一些问题

一.概述

1.在IE6下面使用mouseover和mouseout事件时，如果被注册事件的元素下面有一些子元素，这时候如果鼠标在当前元素的子元素上滑动时，鼠标的事件也会被触发，我们就是想阻止这个中情形下面鼠标事件的触发。

2.使用了mouseleave之后为什么鼠标没有移出元素区域，但是事件依然响应了呢？

3.关于事件冒泡的一些注意点。

二.问题的解释

1.对于第一个问题，可以解释为是IE下面的一个BUG，目前尽量不要使用mouseover和mouseout事件，用mouseenter和mouseleave事件来代替这两个事件，可以防止上面问题的出现。

2.遇见第一个问题之后，采用了mouseleave事件，但是我的效果还是没有达到，在IE6/7下面依然出现鼠标还没有移出去，但是事件却触发了，仔细看了看触发事件的原因是被这个元素盖住的元素下面的一些元素注册了鼠标移动上去的事件，由于当前元素的背景是透明的，导致下面元素的事件可以在当前元素的上移动鼠标时被触发，这样当前元素的鼠标滑出事件也就被触发了。解决的方法是设置当前元素的背景，把当前元素变成非透明的就可以了。

3.关于事件冒泡，加入一个div我们注册了click事件，然后在这个div内部又有一个嵌套的div我们也注册了click事件，这时候如果我们点击内部的div之后，不仅会触发内部div元素的click事件，也会触发外部div的click事件，这就是所谓的事件冒泡，当前可以在内部元素的事件回调函数中去阻止事件的派发，防止出现事件冒泡。在平时开发的过程中要注意一下这一点。

评论

1 楼 ninan1028 2014-01-03  

感谢  解决了一个问题