为什么hover在委派的事件处理程序中不起作用？ [英] Why hover does not work in delegated event handlers?

问题描述

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

I am adding some elements dynamically and assigning a hover property to it in delegated event handlers for which I used below code and it did not work.

$(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 会。

I would like to know why hover does not work, yet mouseover does.

推荐答案

code> .hover 实际上不是一个事件，而只是 mouseenter 和 mouseleave 。从文档：

The function / event .hover is not actually an event, but just a shorthand for mouseenter and mouseleave. From the docs:

.hover（）方法绑定处理程序 mouseenter 和 mouseleave 事件。

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事件。

So you cannot use it to "delegate" events.

解决方案

在文档中提到，可以使用：

As you have already mentioned and as it is mentioned in the docs, you can use:

$(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
  }
});

这篇关于为什么hover在委派的事件处理程序中不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！