onmouseetner和onmuseleave

最新推荐文章于 2024-11-12 15:47:14 发布

weixin_30314631

最新推荐文章于 2024-11-12 15:47:14 发布

阅读量83

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/sky000/archive/2010/10/14/1851262.html

版权

其实有时候觉得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>

转载于:https://www.cnblogs.com/sky000/archive/2010/10/14/1851262.html