即使元素消失，悬停状态也会在转换期间保持 [英] Hover state is maintained during a transition even if the element has gone

问题描述

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

< div id =内容>悬停我！< / div>


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

#content：hover {
transform：translateY（500px）;
转换：转换1s 500ms;
}


以这个小提琴为参考： http://jsfiddle.net/Blackhole/h7tb9/ 3 /

上面的 div 直接绑定了鼠标事件。较低的 div 具有绑定到其父级的鼠标事件。拿起较低的一个。

1. 您触摸边缘和 mouseover 和 mouseenter 会快速连续触发（悬停）。
   
2. 结果内部 div 翻译。


3. 什么也不做。没有事件被触发，所以什么也没有发生。


4. 将鼠标移动到外部 div 中。 mousemove fires和内部 div 仍然被翻译。


5. 缓慢移动将鼠标移出。 mouseout 和 mouseleave 会快速连续触发，内部 div 翻译回原来的位置。 http://www.w3.org/TR/2013/WD-DOM-Level -3-Events-20131105 /＃events-mouseevents 。 步骤3以上是重要的。因为你什么都不做，所以没有事件被解雇，因此没有任何反应。如果内部的 div 在这一步骤中会回弹到原来的位置，那么这意味着激活在没有任何事件的情况下发生！
   
   
   

   这与 的定义一致，作为本节中的文档： http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-事件说：
   
   

   
   

   一个事件是一些事件的表示（例如鼠标
   单击演示文稿元素的移除，从元素中移除子节点
   或任何数量的其他可能性），这是与其事件目标关联的
   。每个事件都是
   一个特定事件类型的实例。

   
   

   现在查看文档： http：//www.w3。 org / TR / 2013 / WD-DOM-Level-3-Events-20131105 /＃event-flow ，就在第3.2节开始之前，它表示： p>
   
   

   
   

   事件完成其传播路径的所有阶段后，必须将其
   Event.currentTarget设置为null，并且Event.eventPhase必须将
   设置为0（无）。 Event的所有其他属性（或来自Event的接口
   ）都不会改变（包括Event.target
   属性，它必须继续引用事件目标）。
   

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

   
   
   

   现在选择上面的 div 在小提琴中供参考。在 mouseenter 上 div 本身已被翻译。 它是否从鼠标指针下移开并不重要。 event.target仍然引用它 ，如果没有其他鼠标事件发生，则不会发生任何事情，并且它仍然会被翻译。当你移动你的鼠标时（在任何地方或任何地方），激活发生在event.target（它仍然是 div ）和 现在是user-agent发现鼠标指针不再位于元素 上，并且立即出现 mouseout 和 mouseleave events fire（当然，在发生 mousemove 之后）导致 div 返回。

   
   
   

   你的问题的第二部分：
   
   

   
   <2> 2.避免这个问题的解决方案是什么？

   
   
   

   编辑：为了给你一个上下文，下面是我想要具体做的事情：
   with JavaScript，当鼠标位于元素上时，显示一个工具提示
   （当鼠标离开时隐藏它）。但是当用户点击它时，相同的元素可以被
   转换。如果用户只需点击
   而不移动鼠标，工具提示将保持显示，这是
   真正的问题。如何检测元素已经不存在？

   
   

   如果您查看 div 在这个小提琴中： http://jsfiddle.net/abhitalks/h7tb9/2/ ;与上面的div相比，当鼠标移动时没有颤动/抖动。这是因为，而不是 div 本身，事件正在父级处理。

   
   
   

   成为您的使用案例的一个解决方案。

   
   
   

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

   
   
   

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

   
   
   

   在这里，如果点击，元素正在被翻译，然后不会再发生 hover 动作。工具提示本身是通过使用：伪元素实现的。这会在点击之后分隔出您想更改的工具提示和元素。你仍然处理元素本身的事件。不需要超时，因为它由css本身处理。如果你 mouseout ，工具提示会在延迟后隐藏。

   
   
   

   希望有帮助。

   
   

   Consider a simple element, and its associated CSS:

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

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

   JSFiddle

   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.

   
   Notice the cursor (a pointer) and its relative position with the element!

   That's a real problem when a JavaScript function must be executed only if the mouse is on an element, after a timeout:

   // The mouseleave event will not be called during the transition,
   // unless the mouse move !
   
   element.on('mouseenter', executeAfterTimeout);
   element.on('mouseleave', cancelTimeout);
   

   So here are my questions:

   1. Is this behaviour normal (compliant with the norms)?
   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?

   解决方案

   Part 1 of your question:

   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)?

   Yes. This behaviour is normal. Although not specified verbatim in the standards, it is mentioned in detail here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105

   Take this fiddle as reference: http://jsfiddle.net/Blackhole/h7tb9/3/

   The upper div has mouse-events bound to it directly. The lower div has mouse-event bound to its parent. Pick up the lower one. Move the mouse slowly at one edge and watch the console to see what happens.

   1. You touch the edge and mouseover and mouseenter are fired in quick succession (hover).
   2. As a result the inner div translates.
   3. Do nothing. No event is fired and so nothing happens.
   4. Move the mouse inside the outer div. mousemove fires and the inner div is still translated.
   5. Slowly move the mouse out. mouseout and mouseleave are fired in quick succession and the inner div translates back to its original position.

   This is described here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-mouseevents under the section Mouse Event Order.

   Step 3 above is important. Because you are doing nothing, no event is fired and hence nothing happens. If the inner div were to bounce back to its original position in this step, then it would mean that an activation happened without any event!

   This is in line with the definition of event as the document in this section: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event says:

   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.

   Now have a look at the document here: http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#event-flow, just before the section 3.2 starts, it says:

   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).

   The last line (in parentheses) is important. The event.target continues to reference the event target even after the event completes.

   Now pick the upper div in the fiddle for reference. On mouseenter the div itself is translated. It does not matter if it moves away from below the mouse pointer. The event.target is still referencing to it and if no other mouse event occurs, nothing happens and it remains translated. The moment you move your mouse (anywhere in or out), the activation occurs on the event.target (which is still this div) and now the user-agent finds that the mouse pointer is no longer over the element and immediately mouseout and mouseleave events fire (after firing mousemove of course) causing the div to translate back.

   Part 2 of your question:

   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?

   If you look at the implementation in the lower div in this fiddle: http://jsfiddle.net/abhitalks/h7tb9/2/ ; as compared to the upper div, there is no flutter/jitter when mousing over. This is because rather than the div itself, the events are being handled on the parent.

   So, that could be one solution for your use case.

   See this demo: http://jsfiddle.net/Blackhole/nR8t9/9/

   This addresses your edit. Tooltip gets displayed on mouseover. Tooltip gets hidden on mouseleave. The same element can be transform-ed when you click. If you simply click without moving the mouse, the tooltip hides.

   Here, if you click, the element is being translated and then no further hover action would happen. The tooltip itself is implemented using a :before pseudo-element. This separates out the tooltip and the element which you want to change after click. You still handle events on the element itself. No need for timeout as it is handled by the css itself. If you mouseout, the tooltip will hide after a delay.

   Hope that helps.

   这篇关于即使元素消失，悬停状态也会在转换期间保持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！