其實有時候覺得IE還是不錯的。onmouseenter,onmouseleave這樣的方便的東西，他就支援了。可FF卻不支援。現封裝一下。如果不知道mouseenter,mouseleave的作用就自己百度一下。
/*----------------------------------------------------*///封裝好的事件監聽函數，同時讓常見的瀏覽器支援mouseenter和mouseleave。//IE預設支援onmuseenter和onmouseleavefunction 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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
