onmouseetner和onmuseleave

时间：2010-10-14 来源：zjhsd2007

其实有时候觉得IE还是不错的。onmouseenter,onmouseleave这样的方便的东西，他就支持了。可FF却不支持。现封装一下。如果不知道mouseenter,mouseleave的作用就自己百度一下。

/*----------------------------------------------------*/
//封装好的事件监听函数，同时让常见的浏览器支持mouseenter和mouseleave。
//IE默认支持onmuseenter和onmouseleave
function addEvent(el, type, handler, capture) {  
  if (typeof el.addEventListener != 'undefined') {  
    if (type === 'mouseenter') {  
      el.addEventListener('mouseover', findElement(handler), capture);  
    } else if (type === 'mouseleave') {  
      el.addEventListener('mouseout', findElement(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 findElement(handler) {  
    return function (e) { 
         //relatedTarget 事件属性返回与事件的目标节点相关的节点。
                //对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
               //对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
             //对于其他类型的事件来说，这个属性没有用。
              var parent = e.relatedTarget;  
             //parent的最终结果要么为null,要么为this;
               while ( parent && parent != this ) parent = parent.parentNode;
              //parent为this的时候是不需要执行函数的，无论是mouseenter还是mouseleave,我曾在这上面纠结了很久。
            if ( parent != this )  handler.call(this, e);  
    };  
};  
/*----------------------------------------------------*/

//函数测试
var $ = function(id){  
  return document.getElementById(id);  
}  

addEvent(window,'load',function(){
        var li = $('guide'),submenu = $('submenu');
 addEvent(li,'mouseenter',function(){
                submenu.style.display = 'block';
            document.title = 'in'
       })
  addEvent(li,'mouseleave',function(){
                submenu.style.display = 'none';
             document.title = 'out'
      })
});

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
       body { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-}
  .guide { background:#666; }
     .submenu { background:#000; color:#fff; position:absolute;top:22px; left:0;}
        .submenu a, .guide a {color:#fff; text-decoration:none;}
</style>
<script type="text/javascript" src="test.js"></script>
</head>

<body>
<ul>
         <li class="guide" id="guide" style="position: relative;">
             <a title="Anreise & Unterkunft" href="#" class=""><span class="nav-arrow">Anreise & Unterkunft</span></a>
            <div class="submenu" id="submenu">
                           <ul>
                  <li>
                  <strong><a title="Flug" href="index_flugangebote.html">Flug</a></strong>
                    <ul class="menu-level3">
                      <li><a title="Flug buchen" href="index_flugangebote.html">Flug buchen</a></li>
                        <li><a title="Flugangebote" href="index_flugangebote.html">Flugangebote</a></li>
                         <li><a title="Flug-Reisepakete" href="index_flugangebote.html">Flug-Reisepakete</a></li>
                    </ul>
                    <strong><a title="Bahn" href="#">Bahn</a></strong>
                    <ul class="menu-level3">
                          <li><a title="Bahn-Reisepakete" href="#">Bahn-Reisepakete</a></li>
                    </ul>
                    <strong><a title="Mietwagen" href="#">Mietwagen</a></strong>
                    <ul class="menu-level3">
                     <li><a title="Mietwagen buchen" href="#">Mietwagen buchen</a></li>
                    </ul>
                </li>
                <li>
                  <strong><a title="Hotel" href="objektseite.html">Hotel</a></strong>
                    <ul class="menu-level3">
                           <li><a title="Hotel buchen" href="objektseite.html">Hotel buchen</a></li>
                        <li><a title="Hotelangebote" href="objektseite.html">Hotelangebote</a></li>
                    </ul>
                    <strong><a title="Ferienwohnungen" href="#">Ferienwohnungen</a></strong>
                    <ul class="menu-level3">
                           <li><a title="Ferienwohnungen buchen" href="#">Ferienwohnungen buchen</a></li>
                        <li><a title="Ferienwohnungen-Angebote" href="#">Ferienwohnungen-Angebote</a></li>
                    </ul>
                </li>
            </ul>
            </div>
        </li>
    </ul>
</body>
</html>