Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

在webkit中实现mouseenter和mouseleave

  如果用过JQ,那么肯定经常用到mouseenter和mouseleave。JQ中已经封装好了这个事件,所以使用起来很方便。但是脱离JQ呢?翻了下MDN,上面说Chrome和Safari不支持。而这俩兄弟都是webkit内核的所以问题在webkit上。我又考虑了一个问题,mouseenter和mouseleave是W3C标准的吗?虽然火狐支持它们(火狐的Gecko总是和W3C同步),但是要眼见为实。所以翻了下W3C的Events,白纸黑字写的清清楚楚。那这就只能说webkit抽风了,不过我猜它以后会支持的。罗嗦了一大堆,其实这篇文章的目的是在webkit上模拟mouseenter和mouseleave。
  其实,如果只是webkit的话,实现起来是很容易的。只要在mouseover或mouseout中加个判断语句就行了。 <style>
#a {width:100px;height:100px;background:#CCF;padding:30px;}
#b {width:40px;height:40px;background:#CFC;padding:30px;}
#c {width:40px;height:40px;background:#FCC;}
</style>
<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>
<script>
window.onload=function(){
  //不注释了,后面解释
  var panel=document.getElementById("a");
  panel.onmouseout=function(e){
    if(!this.contains(e.relatedTarget)){
      console.log("out");
    };
  };
  panel.onmouseover=function(e){
    if(!this.contains(e.relatedTarget)){
      console.log("enter");
    };
  };
};
</script>
  在现代浏览器中可以使用relatedTarget来获取事件的相关对象。比起IE中的toElement和fromElement,这个要方便很多。“相关对象”的概念也许有点模糊,不过搞懂了就好了。下面来看一个对照表
  mouseover事件:
    target==srcElement
    relatedTarget==fromElement
    target==toElement
  mouseout事件:
    target==srcElement
    relatedTarget==toElement
    target==fromElement
  看这个对照表就会发现,在mouseover和mouseout事件中,IE下的srcElement总是会与fromElement和toElement中的其中一个相等,这不是很多余吗?所以现代浏览器只用一个relatedTarget来指定“相关对象”。contains方法是用来判断一个元素是否包含在另一个元素中的,上面的代码可以这样解读:当鼠标从A元素移入B元素时,如果A元素是绑定事件的元素的子元素,那就说明这次鼠标事件完全是在绑定事件的元素内触发的,所以不会触发mouseenter;当鼠标从A元素移出到B元素时,如果B元素是绑定事件的元素的子元素,那就说明这次鼠标事件也是完全是在绑定事件的元素内触发的,所以不会触发mouseenter。
  这样问题就解决了,如果要更详细的了解relatedTarget和contains,可以看看MDN上的文档:
  MDN event.relatedTarget
  MDN Node.contains
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^