onmouseetner和onmuseleave

其实有时候觉得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-height:1.5;}

	.guide { background:#666; height:22px;}

	.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>



你可能感兴趣的:(EL)