火狐FireFox兼容mouseover,mouseout的解决方案

本文主要是介绍火狐FireFox兼容mouseover,mouseout的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天在用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的解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---