今天在用anjularjs做前端開發時，遇到一個火狐不兼容的問題。主要是一個div的mouseover和mouseout事件觸發的兼容性。開發時用的谷歌瀏覽器，所以事件運行效果跟預想的完全一致。在測試時用火狐瀏覽器測試一下，效果沒了！頓時覺得很懵逼。代碼如下：

?

$(".hitch").mouseover(function (e) {var off=$(e.target).offset();$("#pop").css({"top":off.top-150+"px", "left":off.left-200+"px", "display":"block"});}).mouseout(function () {$("#pop").hide();});

就是這段代碼，在谷歌下完全正常，但是在火狐下就是不行，但用火狐一debug，就出來了。后來進過各種嘗試，發現用如下代碼可以解決這個兼容性問題：

?

?

$(document).on('mouseover','.hitch',function(e){var off=$(e.currentTarget).offset();$("#pop").css({"top":off.top-150+"px", "left":off.left-200+"px", "display":"block"});}).on('mouseout','.hitch',function () {$("#pop").hide();});

這么寫了之后，火狐跟谷歌的顯示效果跟預想的完全一致。

?

解釋，document?往事件觸發地點，捕獲前進，遇到相同注冊事件立即觸發執行，到達事件位置，觸發事件（如果該處既注冊了冒泡事件，也注冊了捕獲事件，按照注冊順序執行），事件觸發地點往 document 方向，冒泡前進，遇到相同注冊事件立即觸發。所以使用$(document).on("click","#a",function(){alert(1)})

去監聽捕獲這個事件。
?

總結

以上是生活随笔為你收集整理的火狐FireFox兼容mouseover,mouseout的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。