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

2022-01-22 00:00:00 hover jquery javascript css

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

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 并且成功了:

Then I used mouseover and it worked: 

$(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.

推荐答案

函数/事件 .hover 实际上并不是一个事件，而只是 mouseenter 的简写和鼠标离开.来自 docs:

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.

所以你不能用它来委托"事件.

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

相关文章