火狐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)})

去监听捕获这个事件。