jquery - JQuery mouseenter 在重叠的 div 上多次触发

Question

我正在使用 JQuery mouseenter 事件在另一个 div 中显示一个 div。当鼠标进入 DIV AI 时，会在其中显示一个较小的 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');