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

怼烎@ 2022-06-09 08:27 552阅读 0赞

今天在用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)\})

去监听捕获这个事件。

发表评论取消回复

表情：

评论列表（有 0 条评论，552人围观）

还没有评论，来说两句吧...

相关阅读

相关 firefox(火狐)配置设置方法

*在firefox地址栏中输入***about:config***即可查看并设置，见下图：** ![watermark_type_ZmFuZ3poZW5naGVpdGk...

比眉伴天荒/ 2024年04月17日 22:09/ 0 赞/ 81 阅读

相关 Firefox火狐设置

火狐浏览器功能强大，安全性高，但是它的启动速度比较慢，打开网页的速度也比较一般，但是我们可以通过简单的设置让它成为最优秀的浏览器，具体操作如下在火狐地址栏中输入： abou

本是古典何须时尚/ 2024年03月27日 10:18/ 0 赞/ 111 阅读

相关火狐（Firefox）浏览器配置代理

本文代理的配置是和bp搭配的，所以是配置本地代理。 1.首先打开火狐浏览器，然后按照下图的步骤打开设置。 ![f4f71dc519124813a7030900523ac0e

阳光穿透心脏的1/2处/ 2024年03月26日 18:15/ 0 赞/ 91 阅读

相关 Firefox火狐浏览器的高效使用

Firefox火狐浏览器的高效使用在统一的地址栏搜索一切页面操作菜单：书签、截图、保存或分享同步

朴灿烈づ我的快乐病毒、/ 2023年08月17日 17:24/ 0 赞/ 68 阅读

相关回车键提交兼容火狐

回车键提交： $("body").keydown(function ( event) \{ var event = event || window.even

野性酷女/ 2022年07月17日 01:59/ 0 赞/ 220 阅读

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

今天在用anjularjs做前端开发时，遇到一个火狐不兼容的问题。主要是一个div的mouseover和mouseout事件触发的兼容性。开发时用的谷歌浏览器，所以事件运行效果

怼烎@/ 2022年06月09日 08:27/ 0 赞/ 553 阅读

相关火狐浏览器的兼容性问题

window.open()方法一般是用来弹出窗口的. 范例:window.open('/PSL1/Index', '\_blank', 'height=600,width

旧城等待，/ 2022年06月04日 04:21/ 0 赞/ 298 阅读

相关去除兼容火狐红色边框阴影和兼容火狐select选择按钮

1、input, textarea, select \{ appearance: none; outline: none !important;

╰半橙微兮°/ 2022年05月30日 08:48/ 0 赞/ 424 阅读

相关火狐浏览器（firefox）下如何隐式获取event（兼容谷歌以及IE）

event在IE以及谷歌里面是一个全局变量，所以可以直接在方法中获取。但是火狐浏览器中event却是一个现场对象，是无法直接调用的，但是我们可以通过在方法中添加此行代码获取ev

清疚/ 2022年03月24日 15:18/ 0 赞/ 350 阅读

相关火狐firefox进行post提交测试

1,打开火狐浏览器，将测试url复制到地址栏。按F12，进行连接。![Center][] 2，点击连接：再点击“编辑与重发” 3,请求头中加入如下一行： Content-

Dear 丶/ 2022年01月05日 12:59/ 0 赞/ 929 阅读