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>
