Javascript中onmouseout与onmouseleave
為什么80%的碼農都做不了架構師？>>> ??
在IE下解決問題很簡單，用onMouseEnter、onMouseLeave來代替onMouseOver、onMouseOut就行了，他們的作用基本相同，前者不會發生冒泡。但是firefox下沒有這兩個事件，如果用 jQuery的event事件，只要bind mouseleave和mouseenter即可。如果是純js實現，只能這么做：
?
通過判斷觸發onMouseOut事件后鼠標到達的元素是不是包含在父元素(信息欄Div)內，如果是就表示鼠標還在信息欄上，則不隱藏，如果否就表示鼠標真的移出了信息欄，那么信息欄隱藏,思路有了，那么就一步步來解決問題
?
首先來獲取觸發onMouseOut事件的元素，IE下event的屬性toElement來獲得，在firefox下變成了relatedTarget(很是折騰!)
IE：event.toElement??? Firefox：event.relatedTarget（注意Firefox下event須要調用函數時傳入)
?
接下來就是判斷獲取的元素是否是子元素，IE下通過元素的contains(Element)方法可以判斷，同樣的firefox下沒有這個方法！！，不過可以給firefox下的元素定義contains()方法來解決問題，代碼如下：
?
if(typeof(HTMLElement)!="undefined")??? //給firefox定義contains()方法，ie下不起作用
{??
????? HTMLElement.prototype.contains=function(obj)??
????? {??
????????? while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通過循環對比來判斷是不是obj的父元素
?? if(obj==this) return true;??
?? obj=obj.parentNode;
?? }??
????????? return false;??
????? };??
}??
獲取和判斷搞定后，我們就可以通過判斷IE和Firefox來針對處理了，通過navigator.userAgent來判斷瀏覽器：
??? if(navigator.userAgent.indexOf("MSIE")>0) {
???????? return "MSIE";
?? }
?? if(navigator.userAgent.indexOf("Firefox")>0){
??????? return "Firefox";
?? }
到此為止所有要解決的問題都得到了解決，當觸發onMouseOut事件時我們針對不同的瀏覽器先獲取鼠標到達的元素，然后通過判斷該元素是否在信息欄(div)內，如果元素是子元素，那么不執行onMouseOut事件，反之則執行事件，隱藏信息欄，完成后的代碼如下：
function hideMsgBox(theEvent){ //theEvent用來傳入事件，Firefox的方式
? ?????? if (theEvent){
??? ????????? var browser=navigator.userAgent;?? //取得瀏覽器屬性
??? ????????? if (browser.indexOf("Firefox")>0){ //如果是Firefox
???? ???????????? if (document.getElementById('MsgBox').contains(theEvent.relatedTarget)) { //如果是子元素
????? ??????????????? return;?? //結束函式
???????????????????????? }
??????????????? }
????????????????? if (browser.indexOf("MSIE")>0){ //如果是IE
?????????????????????????? if (document.getElementById('MsgBox').contains(event.toElement)) { //如果是子元素
???????????????????????????????? return; //結束函式
??????????????????????????? }
????????????????? }
???????????? }
??????????? /*要執行的操作*/
}
在信息欄(Div)上設置onMouseOut=hideMsgBox(event)來調用，解決冒泡問題。
通過設置
window.event.cancelBubble = true (IE) event.stopPropagation() event.preventDefault() (Firefox)
也可以解決問題，但是需要遍歷所有子元素，影響效率，所以還是在觸發onMouseOut事件時再進行上述判斷分別處理比較合適。
?
================其他方法===========================
?
方案一:
?
希望實現 當鼠標離開一個DIV的時候觸發一個事件處理函數 于是用onmouseout 結果卻發現它的觸發是不是也太敏感了 原因現在也沒有弄清楚 IE下好像是因為區分mouseout時的fromElement還是toElement ，IE 5.5以上的onmouseleave事件就比較好用 偏FF又不支持這個事件 只有自己想辦法手工判斷了。
<SCRIPT>
/***
?* 參數e 是對象傳遞的觸發事件 FF下想訪問event對象必須傳遞event參數
* 參數o 是目標DIV對象
*/??
function fun(e,o) {
???????? /* FF 下判斷鼠標是否離開DIV */
???????? if(window.navigator.userAgent.indexOf("Firefox")>=1) {
???????????? var x = e.clientX + document.body.scrollLeft;
???????????? var y = e.clientY + document.body.scrollTop ;
???????????? var left = o.offsetLeft;
???????????? var top = o.offsetTop;
???????????? var w = o.offsetWidth;
???????????? var h = o.offsetHeight;
????????????
???????????? if(y < top || y > (h + top) || x > left + w || x<left ) {
???????????????? alert("mouseout");
???????????? }
???????? }
?
??????? /* IE */
???????? if(o.contains(event.toElement ) == false??? )
?alert("mouseout");
????????
???? }
< /SCRIPT>
?
< DIV οnmοuseοut=fun(event,this)>content</DIV>
需要注意 在取鼠標的值的時候 一定要加上滾動條已經拖動過的內容e.clientY + document.body.scrollTop 如果只是e.clientY得到是個錯誤的值 當然如果高寬都很小 是看不出來問題。 取一個對象的高和寬 也可以使用 clientHeight clientWidth 屬性 以后遇到FF IE不兼容的時候要多看看FF的開發手冊http://developer.mozilla.org/en/docs/DOM:element.offsetLeft
??
方案二:(與一相似)
?
js的onmouseout有很奇怪的一個問題。例如
?
<div οnmοuseοut="alert(123)">
?
< a href="#">test</a>
?
< /div>
?
我們預期只有當鼠標從div中移開的時候才會觸發onmouseout事件，可是，事實上，當我們移到div中的元素時，例如本例中的a標簽時，就 會觸發onmousout事件。也就是說，移到對象的子對象上，也算onmouseout了。這往往會讓我們預期的效果達不到。今天的工作就遇到了這個問 題。在blueidea上搜了一下，找了解決辦法。兼容IE和FF。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>test</title>
< /head>
?
< body>
< script type="text/javascript">
function test(obj, e) {
if (e.currentTarget) {
?if (e.relatedTarget != obj) {
if (obj != e.relatedTarget.parentNode) {
alert(1);
?}
}
} else {
if (e.toElement != obj) {
?if (obj != e.toElement.parentNode) {
alert(1);
}
}
?}
}
?< /script>
< div οnmοuseοut="test(this, event)" style="width:100px;height:100px;border:1px #666 solid">
?< span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">faddsf</span>
< /div>
< /body>
?< /html>
?
今天發現JQ中關于這個問題,已經有了一個好的解決辦法了.呵呵,jquery中定義了一種事件叫做"mouseleave",用這個事件做事件句柄的話,就可以解決這個問題了.越來越發現jquery是個好東西了.
?
方案三:
??
jQuery V1.2.2推薦用bind("mouseleave",function(){})來代替以前的mouseover方法用bind("mouseenter",function(){})來代替mouseout，同樣也針對以前的hover方法，要看詳細的說明點這個地址：http://docs.jquery.com/Release:jQuery_1.2.2
?
$(document).ready(function() {
??? $("#a1").bind("mouseleave", function(){
??? $('<div style="color:red;">out</div>')
??? .insertAfter($(this));
});
});
?
轉載于:https://my.oschina.net/junn/blog/112851
總結
以上是生活随笔為你收集整理的Javascript中onmouseout与onmouseleave的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP框架 Phalcon 1.0.0
- 下一篇： unistd.h 中int access