javascript - 即使元素已经消失，悬停状态也会在过渡期间保持不变

Question

考虑一个简单的元素及其关联的 CSS:

<div id="content">Hover me !</div>

#content {
    width: 100px;
    height: 100px;
}

#content:hover {
    transform: translateY(500px);
    transition: transform 1s 500ms;
}

JSFiddle

原则很简单:当元素悬停时，它必须向下移动。问题是，当鼠标不动时，:hover 状态会保持不变，即使该元素物理上不再位于鼠标下方(由于翻译) .状态似乎只有在鼠标移动后才会更新。

注意光标(指针)及其与元素的相对位置!

当一个 JavaScript 函数必须在 timeout 之后只有当鼠标在一个元素上时才必须执行时，这是一个真正的问题:

// The mouseleave event will not be called during the transition,
// unless the mouse move !

element.on('mouseenter', executeAfterTimeout);
element.on('mouseleave', cancelTimeout);

所以这是我的问题:

1. 这种行为正常(符合规范)吗？
2. 避免此问题的解决方案是什么？

编辑: 为了给您一个上下文，这是我想具体做的事情:使用 JavaScript，当鼠标位于某个元素上时(并且当鼠标离开时隐藏它)。但是当用户点击它时，相同的元素可以被 transform 编辑。如果用户只是单击而不移动鼠标，工具提示将保持显示状态，这是一个真正的问题。如何检测元素是否消失？

Answer 1

问题的第 1 部分:

The principle is straightforward: while the element is hovered, it must go down. The problem is, when the mouse doesn't move, that the :hover state is maintained even if the element is not physically below the mouse anymore (due to the translation). The state seems to be updated only after an mouse move.

So here are my questions:

1. Is this behaviour normal (compliant with the norms)?

是的。这种行为是正常的。虽然标准中没有逐字规定，但在这里详细提到: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105

以这个 fiddle 为引用:http://jsfiddle.net/Blackhole/h7tb9/3/

上面的 div 直接绑定(bind)了鼠标事件。下方的 div 将鼠标事件绑定(bind)到其父级。拿起下面的那个。在一侧缓慢移动鼠标并观察控制台，看看会发生什么。

1. 您触摸边缘，mouseover 和 mouseenter 会快速连续触发(悬停)。
2. 因此，内部 div 进行了翻译。
3. 什么都不做。没有事件被触发，所以什么也没有发生。
4. 将鼠标移到外部 div 内。 mousemove 触发，内部 div 仍被翻译。
5. 慢慢将鼠标移出。 mouseout 和 mouseleave 快速连续触发，内部 div 转换回其原始位置。

这在此处描述: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-mouseevents 在 鼠标事件顺序 部分下。

上面的第 3 步很重要。因为你什么都不做，所以没有事件被触发，因此什么也没有发生。如果内部 div 在此步骤中弹回其原始位置，则意味着在没有任何事件的情况下发生了激活!

这符合event作为本节文档的定义:http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event说:

An event is the representation of some occurrence (such as a mouse click on the presentation of an element, the removal of child node from an element, or any number of other possibilities) which is associated with its event target. Each event is an instantiation of one specific event type.

现在看看这里的文档: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#event-flow ，就在 3.2 节 开始之前，它说:

After an event completes all the phases of its propagation path, its Event.currentTarget must be set to null and the Event.eventPhase must be set to 0 (NONE). All other attributes of the Event (or interface derived from Event) are unchanged (including the Event.target attribute, which must continue to reference the event target).

最后一行(括号内)很重要。即使在事件完成后，event.target 仍会继续引用事件目标。

现在选择 fiddle 中上方的 div 作为引用。在 mouseenter 上，div 本身被翻译。 它是否从鼠标指针下方移开并不重要。 event.target 仍然引用它，如果没有其他鼠标事件发生，则什么也不会发生，它会保持翻译状态。当您移动鼠标(向内或向外的任意位置)时，激活发生在 event.target(仍然是这个 div)并且现在用户代理发现鼠标指针不再位于元素上 并立即触发 mouseout 和 mouseleave 事件(当然是在触发 mousemove 之后) 导致 div 转换回来。

问题的第 2 部分:

2.What are the solutions to avoid this problem?

Edit : To give you a context, here is what I want to do concretely: with JavaScript, I display a tooltip when the mouse is on an element (and hide it when the mouse leaves it). But the same element can be transform-ed when the user click on it. If the user simply clicks without moving the mouse, the tooltip will remain displayed, which is a real problem. How can I detect that the element is gone?

如果您查看此 fiddle 中较低的 div 中的实现:http://jsfiddle.net/abhitalks/h7tb9/2/ ;与上部 div 相比，鼠标悬停时没有颤动/抖动。这是因为事件不是在 div 本身，而是在父级上处理。

因此，这可能是您的用例的一种解决方案。

查看此演示:http://jsfiddle.net/Blackhole/nR8t9/9/

这解决了您的编辑问题。工具提示显示在 mouseover 上。工具提示在 mouseleave 上隐藏。当您单击 时，可以转换相同的元素。如果您只是简单地单击而不移动鼠标，则工具提示会隐藏。

在这里，如果您单击，该元素将被翻译，然后不会发生进一步的悬停 操作。工具提示本身是使用 :before 伪元素实现的。这将工具提示和您要在 click 后更改的元素分开。您仍然处理元素本身的事件。不需要超时，因为它由 css 本身处理。如果您mouseout，工具提示将在延迟后隐藏。

希望对您有所帮助。