jquery - JQueryのmouseenterは、重複するdivで複数回起動します

Question

JQueryのmouseenterイベントを使用して、別のdiv内のdivを表示しています。マウスがDIVAIに入ると、その中に小さなDIVBが表示されます。問題は、マウスをDIV Bの上に置くと、JQueryがmouseenterイベントを再度実行することです。DIV B（内側）を表示したいのですが、マウスがその上を通過したときに、mouseenterイベントを再度発生させないようにします。技術的には、私のマウスはまだDIV Aをホバリングしています。つまり、DIV B上でMouseoutを実行すると、JQueryはDIV Aでmouseenterを再度実行します。これは、私が理解していることです。

コード：

$(document).on("mouseenter", ".si", function (e) {
   settingsIcon(e,1);

});

$()

$(document).on("mouseout", ".si", function (e) {
    settingsIcon(e,0);

});

function settingsIcon(e, action) {

 if (action === 1) // show
{
    $(".settings_icon").remove();
    var id = parseInt(e.target.id.replace("dvci_", ""), 10); 
    $("#dvc_" + id).prepend("<div class='settings_icon' ><img class='settings_icon_image' src='settings.png' style='width:59px; height:57px'  /></div>");
    var icon = $("#dvc_" + id + " .settings_icon");

    icon.css({
        "left": ($("#dvci_" + id).width() / 2) - 30,
        "top": parseInt($("#dvci_" + id).css("margin-top").replace("px", ""), 10) + ($("#dvci_" + id).height() / 2) - 30
    });

    $(".settings_icon img").show("scale", {}, 400);

}
else {
    // hide
    $(".settings_icon").remove();
}
}

jsfiddle： http: //jsfiddle.net/tLUrd/

Answer 1

event.stopPropagation()を使用してこれを試してください:

$(document).on("mouseenter", ".si", function (e) {
   settingsIcon(e,1);
});

$(document).on("mouseleave", ".si", function (e) {
    settingsIcon(e,0);
});

$(document).on("mouseenter", "#b", function (e) {
    e.stopPropagation();
});

$(document).on("mouseleave", "#b", function (e) {
    e.stopPropagation();
});

Answer 2

$("selector").hover(
  function () {
    console.log("mouse in");
  },
  function () {
    console.log("mouse out");
  }
);

http://api.jquery.com/hover/

jQuery.hover() は、子要素に対しては起動せず、バインドされている要素に対してのみ発生するため、問題が解決します。私もこれを数回経験しましたが、 .hover() は本当にうまくいきます。

Answer 3

jQuery .hover() は、最大 2 つのパラメーターを取ります。

$("#a").hover(
    function () { settingsIcon(null, 1); },
    function () { settingsIcon(null, 0); }
);

編集：

#a を動的に生成する場合に上記のイベントを再バインドしないようにするには、次のようにします。

$(document).on( {
    mouseenter: function() { settingsIcon(null, 1); },
    mouseleave: function() { settingsIcon(null, 0); }
}, '#a');