javascript - mouseleave が常にトリガーされるのはなぜですか?

Question

マップを作成しようとしていますが、マウスをボタンの上に置くと、このマップの特定の位置が強調表示されます。マウスがオーバーレイ イメージに入ると、本来あるべき姿で表示されますが、マウスが移動すると、ホバー ボタン内でオーバーレイ イメージが点滅し、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 がトリガーされます。

z-index:2 を hoverButton に、z-index:1 を mapOverlay に配置することを確認できました。このようにして、マウスを動かしてもイベントは発生しません。

だから私は一時的な修正をしています。onmouseleave イベントを hoverButtons の代わりに mapOverlays に移動すると、うまくいきました。function setMapOverlays() { $(".mapOverlay").hide(); $(".hoverButton").mouseenter( function () { console.log('enter'); var id = $(this).attr('id'); id = id.substr(5);

            showOverlay(id);
        });

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

これは機能しますが、望ましい動作ではありません。マウスが hoverButton の外に移動したときにオーバーレイを非表示にします。それを行う方法に関する提案はありますか？

私がやっていることを正確に説明するのに役立つ2つの画像：

Answer 1

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

ところで、オーバーレイ要素なしで実装する方が簡単かもしれません。mouseenter と mouseleave でマップ全体の画像を変更することを検討しましたか?

Answer 2

あなたの js コードを修正し、img タグに data-id 属性を追加します

新しいhtmlは次のとおりです。

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

新しい jscode は次のとおりです。

function setMapOverlays() {
    $(".mapOverlay").hide();

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

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

    function hover() {
        console.log('hover', this, arguments);
        var id = $(this).data('id');
        showOverlay(id);
    }

    function leave(evt) {
        console.log('leave', this, arguments);
        var id = $(this).data('id');
        var hovered = evt.relatedTarget;
        if ($(hovered).data('id') == id) {
            $(hovered).mouseleave(leave);
            return;
        }
        hideOverlay(id);
    }

    $(".hoverButton")
        .mouseenter(hover)
        .mouseleave(leave);
}

あなたはjsFiddleでこれを試すことができます