JS事件之鼠标事件

时间:2022-03-13 22:35:29

很多人都知道鼠标事件,W3C规定的鼠标事件有5个,它们分别是mousedown,mousemove,mouseup,mouseover,mouseleave。前面三个经常用到一起做拖拽效果,后面两个经常用在一起做类似于:hover的效果。IE除了这5个基本的事件之外还增加了mouseleave和mouseout,这个我们后面再说。
最近在做一个网站的轮播图的时候,出现了一个bug,我原本想做成的效果是鼠标放在图片上,停止轮播,鼠标离开图片后,轮播开始。然而问题就出现了,就是当我把鼠标放在图片上,轮播是停止,但是当我把鼠标由图片移动到左右箭头的时候,轮播又继续开始,这完全违背了我的初衷啊!

JS事件之鼠标事件

开始思考问题出现在哪里?原因是我采用绝对布局把左右箭头放在ul里面,这时候你使用从图片移动到箭头,系统认为会触发mouseout方法;当你再次从箭头移动到图片,系统会再次触发mouseover方法。
上网查阅了一些相关的资料发现了一些有用的东西如下:

  • 事件对象:Event或者Window.Event(不要跟我说你连这个都不知道)
  • Event相关属性(只针对mouseover和mouseout):W3C使用relatedTarget,IE使用fromElement与toElement。
  • 判断一个元素是否包含另外一个元素:W3C使用ele.compareDocumentPosition(Node),IE使用ele.contains(Node)。

    看到这里我大概知道我的问题出现在哪里了。这里以mouseover为例,当我触发了ul(轮播图最外层标签,它上面绑定了)