火狐FireFox兼容mouseover,mouseout的解决方案
2017-09-01 10:09
375 查看
今天在用anjularjs做前端开发时,遇到一个火狐不兼容的问题。主要是一个div的mouseover和mouseout事件触发的兼容性。开发时用的谷歌浏览器,所以事件运行效果跟预想的完全一致。在测试时用火狐浏览器测试一下,效果没了!顿时觉得很懵逼。代码如下:
解释,document 往事件触发地点,捕获前进,遇到相同注册事件立即触发执行,到达事件位置,触发事件(如果该处既注册了冒泡事件,也注册了捕获事件,按照注册顺序执行),事件触发地点往 document 方向,冒泡前进,遇到相同注册事件立即触发。所以使用$(document).on("click","#a",function(){alert(1)})
去监听捕获这个事件。
$(".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)})
去监听捕获这个事件。
相关文章推荐
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)
- js验证控件,兼容 IE、火狐firefox、Opera,android 浏览器
- onmouseout,mouseover经过子元素也触发的问题解决方案(兼容)
- JS在firefox和IE下的区别 兼容解决方案
- firefox(火狐)与IE Chrome浏览器兼容的javascript和CSS写法
- event.srcElement在火狐(FireFox)下的兼容问题。搜索框获得焦点时默认文字变化
- 兼容ie6,ie7,firefox的漂浮窗完美解决方案
- IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法
- JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
- Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案
- CSS兼容IE6、IE7、火狐(Firefox)技巧集合2
- IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结
- CSS兼容IE6、IE7、火狐(Firefox)技巧集合1
- js 复制到剪贴板 ,兼容支持火狐firefox 和 ie
- Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题
- onmouseout,mouseover经过子元素也触发的问题解决方案(兼容)
- javascript option onclick事件ie解决方案 兼容ie,firefox