JS事件之鼠标事件

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

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

• 事件对象：Event或者Window.Event（不要跟我说你连这个都不知道）
• Event相关属性（只针对mouseover和mouseout）：W3C使用relatedTarget，IE使用fromElement与toElement。

• 判断一个元素是否包含另外一个元素：W3C使用ele.compareDocumentPosition(Node)，IE使用ele.contains(Node)。

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