记火狐，IE，Chrome浏览器下mouseenter事件异同

最新推荐文章于 2021-04-30 11:29:18 发布

zhuzhuCode

最新推荐文章于 2021-04-30 11:29:18 发布

阅读量864

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/zjr201213136039/article/details/84792267

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

  在chrome下使用mouseenter事件监听，展示良好

Chrome下动图
在IE以及火狐下确无法触发。在网上搜索查看后并未发现解决办法，经过仔细排查发现是监听元素的区别。
HTML结构如下：

<li>
                <div class="nav-box" boxT="info" id="infoBox">
                    <div class="nav-box-img info"></div>
                    <div class="nav-box-split"></div>
                    <div class="nav-box-title">信息可视化</div>
                </div>
                <div class="mask" boxT="info" id="infoMask">
                    <div class="nav-box-img info"></div>
                    <div class="mask-title">信息可视化</div>
                    <div class="mask-btn url" data-url="/index">点击进入</div>
                </div>
            </li>

  JS监听代码如下：

  $(document).on('mouseenter',".mask",function(){
        var id = $(this).attr("boxT");
        $("#"+id+"Mask").css("opacity",1);
        $("#"+id+"Box").hide();
        $("#"+id+"Mask div").addClass("animated slideInUp");
    }).on('mouseleave',".mask",function(){
        $(this).css("opacity",0);
        var id = $(this).attr("boxT");
        $("#"+id+"Box").show();
        $("#"+id+"Mask div").removeClass("animated slideInUp");
    });

    $(document).on('click',".url",function () {
        var url = $(this).data("url");
        window.location.href = url;
    });

后发现在IE以及火狐下需要监听当前显示元素.nav-box（.mask无法监听），Chrome则正好相反（私以为IE以及火狐的这个逻辑更好理解）
修改后JS代码：

$(function () {
    //火狐以及IE浏览器需要监听.nav-box  chrome监听.mask
    var listenClass = chooseClass(navigator.userAgent);
    $(document).on('mouseenter', listenClass, function () {
        var id = $(this).attr("boxT");
        $("#" + id + "Mask").css("opacity", 1);
        $("#" + id + "Box").hide();
        $("#" + id + "Mask div").addClass("animated slideInUp");
    }).on('mouseleave', ".mask", function () {
        $(this).css("opacity", 0);
        var id = $(this).attr("boxT");
        $("#" + id + "Box").show();
        $("#" + id + "Mask div").removeClass("animated slideInUp");
    });

    $(document).on('click', ".url", function () {
        var url = $(this).data("url");
        window.location.href = url;

    });
});

function chooseClass(info) {
    var isIE = info.indexOf("MSIE")!=-1 ? true : false;
    var isFirefox = info.indexOf("Firefox")!=-1 ? true : false;
    var isChrome = info.indexOf("Chrome")!=-1 ? true : false;
    if(isIE || isFirefox)
        return ".nav-box";
    else
        return ".mask";
}