在重叠的div上，JQuery mouseenter不止一次触发

Question

我正在使用JQuery mouseenter事件在另一个div中显示div。当鼠标进入DIV A时，我在其中显示较小的DIV B.问题是，当我将鼠标放在DIV B上时，JQuery会再次运行mouseenter事件。我想显示DIV B（内部一个），当鼠标移过它时，不要再次触发mouseenter事件。虽然从技术上来说，我的鼠标仍在盘旋DIV A.换句话说，鼠标悬停在DIV B上导致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（）最多需要两个参数：

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

修改

如果动态生成#a：

，请避免重新绑定上述事件

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