为什么悬停在委托事件处理程序中不起作用？

Question

我正在动态添加一些元素，并在委托事件处理程序中为其分配悬停属性，我在下面的代码中使用了它，但它不起作用。

$(document).on("hover", ".sec_close_fast", function() {
  $(this).parent('div').parent('div').css("border", "3px solid #000000");
});

然后我使用了 mouseover 并且成功了：

$(document).on("mouseover", ".sec_close_fast", function() {
  $(this).parent('div').parent('div').css("border", "3px solid #000000");
});

我想知道为什么 hover 不起作用，而 mouseover 却起作用。

Answer 1

函数/事件 .hover 实际上不是事件，而只是 mouseenter 和 mouseleave 的 shorthand。来自 docs:

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

因此您不能将其用于 "delegate" 事件。

解决方案

正如您已经提到的以及文档中提到的那样，您可以使用：

$(static_parent).on("mouseenter mouseleave", element, function (e) {
  if (e.type == "mouseenter") {
    // check if it is mouseenter, do something
  } else {
    // if not, mouseleave, do something
  }
});

为什么悬停在委托事件处理程序中不起作用？

Why hover does not work in delegated event handlers?

javascript

css

jquery

hover