zoukankan      html  css  js  c++  java
  • 为非IE内核游览器添加onmouseenter 和 onmouseleave事件

    好像各大类库中jQuery是最后支持这两东东的,关于它们的优势可以参考reglib类库作者的一篇博文《Goodbye mouseover, hello mouseenter》。我们可以在IE观察下它的效果。

    注意,我们在红色与蓝色之间移动,并没有触发outer元素的mouseenter事件。无错,它们与mouseover,mouseout最大的区别是它们不会冒泡。

    下面试图用mouseover与mouseout模拟mouseenter与mouseleave。

          function addEvent(el, type, handler, capture) {
            if (typeof el.addEventListener != 'undefined') {
              if (type === 'mouseenter') {
                el.addEventListener('mouseover', withinElement(handler), capture);
              } else if (type === 'mouseleave') {
                el.addEventListener('mouseout', withinElement(handler), capture);
              } else {
                el.addEventListener(type, handler, capture);
              }
            } else if (typeof el.attachEvent != 'undefined') {
              el.attachEvent('on' + type, handler);
            } else {
              el['on' + type] = handler;
            }
          }
          function withinElement(handler) {
              return function (e) {
                var parent = e.relatedTarget;
                while ( parent && parent != this ) {
                  try { parent = parent.parentNode; }
                  catch(e) { break; }
                }
                if ( parent != this )
                  handler.call(this, e);
              };
            };
          var $ = function(id){
            return document.getElementById(id);
          }
          window.onload = function(){
            function myFn(e){
              e = e || window.event;
              var target = e.target ? e.target : e.srcElement;
              if(target.nodeType === 3){
                target = target.parentNode;
              }
              $('memo').innerHTML = e.type + ': ' + target.id;
            };
            addEvent($("inner"),"mouseenter",myFn,false);
            addEvent($("inner"),"mouseleave",myFn,false);
            addEvent($("outer"),"mouseenter",myFn,false);
          }
    

    看看jQuery的实现,它用了一个冒牌事件对象,因此我们可以在FF中用e.type能打印出mouseenter,除此与上面没多大改善。

  • 相关阅读:
    1.解决有冲突的分支,切换分支时,文件不在了 2.冲突解决到底???
    Github到了一个工作区里面。嵌套了
    【计蒜课】【数据结构】【栈的复习】
    【计蒜课】【数据结构】【队列的复习】
    【计蒜课】【数据结构】【邻接矩阵使用的复习】
    【计蒜课】【数据结构】【链表的创建、插入、遍历操作的复习】
    【计蒜课】【数据结构】【顺序表查找、删除、遍历操作的复习答案】
    【计蒜课】【数据结构】【顺序表的构造、插入、扩容操作习题】
    实验六
    6.6实验五
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1627921.html
Copyright © 2011-2022 走看看