为非IE内核游览器添加onmouseenter 和 onmouseleave事件

最新推荐文章于 2024-10-07 09:24:46 发布

weixin_33958585

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量102

点赞数

文章标签： javascript ViewUI

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

<!doctype html> <html dir="ltr" lang="zh-CN"> <head id="head"> <meta charset="utf-8"/> <title>mouseenter and mouseleave by司徒正美</title> <style title="text/css"> div { background:red; } ul { background:blue; } </style> </head> <body> <div id="outer"> <p>注意：div与ul都绑定了onmouseenter，而只有绑定了onmouseleave</p> <ul id = "inner"> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> </ul> </div> <p id="memo"></p> <script type = "text/javascript"> var $ = function(id){ return document.getElementById(id); } $('inner').attachEvent('onmouseenter', myFn); $('inner').attachEvent('onmouseleave', myFn); $('outer').attachEvent('onmouseenter', myFn); function myFn(e){ $('memo').innerHTML =e.type + ': ' + e.srcElement.id; } </script> </body> </html>

运行代码

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

<!doctype html> <html dir="ltr" lang="zh-CN"> <head id="head"> <meta charset="utf-8"/> <title>mouseenter and mouseleave by司徒正美</title> <style title="text/css"> div { background:red; } ul { background:blue; } </style> <script type="text/javascript" charset="utf-8"> 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) { parent = this; } 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"),"mouseover",myFn,false); addEvent($("inner"),"mouseout",myFn,false); addEvent($("outer"),"mouseover",myFn,false); } </script> </head> <body> <div id="outer"> <p>注意：div与ul都绑定了onmouseenter，而只有绑定了onmouseleave</p> <ul id = "inner"> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> </ul> </div> <p id="memo"></p> </body> </html>

运行代码

下面试图用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);
      }

<!doctype html> <html dir="ltr" lang="zh-CN"> <head id="head"> <meta charset="utf-8"/> <title>mouseenter and mouseleave by司徒正美</title> <style title="text/css"> div { background:red; } ul { background:blue; } </style> <script type="text/javascript" charset="utf-8"> 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); } </script> </head> <body> <div id="outer"> <p>注意：div与ul都绑定了onmouseenter，而只有绑定了onmouseleave</p> <ul id = "inner"> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> </ul> </div> <p id="memo"></p> </body> </html>

运行代码

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

<!doctype html> <html dir="ltr" lang="zh-CN"> <head id="head"> <meta charset="utf-8"/> <title>mouseenter and mouseleave by司徒正美</title> <style title="text/css"> div { background:red; } ul { background:blue; } </style> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function(){ function myFn(e){ $('#memo').text(e.type + ': ' + e.target.id); }; $("#inner").mouseenter(myFn); $("#inner").mouseleave(myFn); $("#outer").mouseenter(myFn); })(); </script> </head> <body> <div id="outer"> <p>注意：div与ul都绑定了onmouseenter，而只有绑定了onmouseleave</p> <ul id = "inner"> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> <li>司徒正美</li> </ul> </div> <p id="memo"></p> </body> </html>

运行代码