javascript – 为什么mouseleave一直在触发？

2019-09-01 17:34:06 阅读：176 来源： 互联网

标签：html javascript jquery mouseevent

我正在尝试创建一个地图,当我将鼠标悬停在按钮上时,此地图的某个位置应突出显示.当鼠标进入叠加图像时,显示应该是,但当鼠标移动时,在悬停按钮内,叠加图像闪烁,并重复触发mouseEnter和mouseLeave事件.我也尝试过使用mouseOver,hover和mouseout,结果相同.难道我做错了什么？

HTML：

  <div id="map">
                <img src="images/map/map.png" />                    
                <img src="images/map/mapHover.png" id="hoverhighlands" class="hoverButton"/>
                <img src="images/map/mapHover.png" id="hovernorth" class="hoverButton"/>
                <img src="images/map/mapHover.png" id="hovercentral" class="hoverButton"/>
                <img src="images/map/mapHover.png" id="hoverlothian"class="hoverButton" />                    <img src="images/map/mapHover.png" id="hoverwest" class="hoverButton" />
                <img src="images/map/central.png" class="mapOverlay" id="central" />
                <img src="images/map/highlands.png" class="mapOverlay" id="highlands" />
                <img src="images/map/lothian.png" class="mapOverlay" id="lothian" />
                <img src="images/map/northeast.png" class="mapOverlay" id="north"/>
                <img src="images/map/west.png" class="mapOverlay" id="west"/>
            </div>

JS：

function setMapOverlays() {
    $(".mapOverlay").hide();
    $(".hoverButton").mouseenter(
        function () {
            var id = $(this).attr('id');            
            id = id.substr(5);

            showOverlay(id);
        }).mouseleave(function () {
            console.log('mouseleave');
            var id = $(this).attr('id');
            id = id.substr(5);
            hideOverlay(id);
        })

}

function showOverlay(id) {
    $('#' + id).show();
}

function hideOverlay(id) {
    $('#' + id).hide();
}

编辑

好吧,我知道为什么它不起作用.当.show()函数触发我的叠加图像放在hoverButtons的顶部时,触发onmouseleave.

我设法验证在mapOverlay上的hoverButton和z-index：1上放置z-index：2.这样,移动鼠标时不会触发事件.

所以我有一个临时修复.将onmouseleave事件移动到我的mapOverlays而不是我的hoverButtons就可以了.
    function setMapOverlays(){
       $( “mapOverlay.”)隐藏().
        $( “hoverButton”).的mouseenter(
            function(){
                的console.log( ‘输入’);
                var id = $(this).attr(‘id’);
                id = id.substr(5);

            showOverlay(id);
        });

    $('.mapOverlay').mouseleave(function () {
        console.log('mouseleave');               
        hideOverlay($(this));
    })
}

这可行,但这不是理想的行为.当鼠标移出hoverButton时,我希望Overlay隐藏起来.有关如何做到这一点的任何建议？

两张图片有助于解释我正在做的事情：

解决方法:

不要对hoverButton类使用mouseleave事件.尝试在显示时处理覆盖中的mousemove事件,并检查是否仍然在启动了叠加显示方法的元素上.

function setMapOverlays() {
    $(".mapOverlay").hide();
    $(".hoverButton").mouseenter(function() {
        var id = $(this).attr('id');
        id = id.substr(5);

        showOverlay(id, this);
    });
};

function showOverlay(id, initiator) {
    initiator = $(initiator);
    initiatorBoundary = {
        x1: initiator.offset().left,
        x2: initiator.offset().left + initiator.outerWidth(),
        y1: initiator.offset().top,
        y2: initiator.offset().top + initiator.outerHeight()
    };

    $('#' + id).mousemove(function(event) {
        if (event.pageX < initiatorBoundary.x1 || event.pageX > initiatorBoundary.x2 || event.pageY < initiatorBoundary.y1 || event.pageY > initiatorBoundary.y2) {
            $(this).hide();
        }
    }).show();
}

jsFiddle here

顺便说一下,也许没有覆盖元素会更容易实现.您是否考虑过在mouseenter和mouseleave上更改整个地图图像？

标签：html,javascript,jquery,mouseevent
来源： https://codeday.me/bug/20190901/1785043.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 为什么mouseleave一直在触发？