在 chrome 中按下鼠标按钮时无法应用悬停样式

Posted 2023-05-08

【中文标题】在 chrome 中按下鼠标按钮时无法应用悬停样式

【英文标题】：hover style can not apply when press mouse button in chrome

【发布时间】：2015-05-21 16:34:52

【问题描述】：

全部：

[UPDATE] 我找到了另一种方法来实现这一点，不是解决方案，而是一个有效的技巧： 使用 mousedown 作为事件触发器（因为我需要一个拖动动作，所以无论如何应该有一个 mousedown 事件），在其中，将 mouseover 事件绑定到该跨度（我不知道为什么，但是在 mousedown 内绑定 mouseover 可以使mouseover 在 span 上工作），给它一个改变背景颜色的新类；

Chrome 40 遇到的问题是：

I set a style:

span 
    background-color:red;

span:hover 
    background-color:blue;



<span>TEST AREA</span>

当我鼠标按下然后鼠标悬停时，背景颜色没有改变

已在此处解决，但未发布解决方案： https://code.google.com/p/chromium/issues/detail?id=122746

我测试了 IE11 Firefox35，它们都运行得很好。只有 Chrome 40 不工作:(

任何人都可以帮助使样式应用或提供一种方法来触发该跨度上的鼠标悬停正在进行拖动操作（我想做的是在它上面拖动一些东西，背景颜色的变化表示拖动是否在目标区域上方。）？谢谢！

【问题讨论】：

为什么不直接使用拖动事件，例如dragenter/dragover/dragend/dragleave等……？见developer.mozilla.org/docs/Web/Guide/html/Drag_and_drop#events。

Chrome won't apply css hover style when left mouse button is held down的可能重复

【参考方案1】：

有趣的 chrome 错误！直到我遇到你的问题，我才注意到它。这让我想到了 FF 是如何处理这个事件的。

所以我设计了一个简单的代码 sn-p 来跟踪触发悬停和点击事件的事件。

你可以找到这个snippet fiddle here。

现在在小提琴中，如果您删除最后一段中的 cmets，

$(document).mousemove(function () 
            console.clear();
            console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement);                
    );

然后评论下面的部分，

$(hoveredElement).mouseenter(function () 
            $(this).addClass('jsHover');
        ).mouseleave(function () 
            $(this).removeClass('jsHover');
        );

现在代码复制了您提到的问题（在 chrome 中尝试它，FF 我能够在 chrome 41 中复制）。

如果你注意各个浏览器的控制台，我的发现是当你在span元素之外点击然后拖动鼠标进入该元素时，会发生这种情况...

在 Chrome 中

只需将鼠标悬停在第一个 span 元素之外而不进入 span 空间：控制台输出

hovered element now: BODY -- & -- clicked element now: undefined

现在单击鼠标左键（mousedown 和 mouseup）：控制台输出

hovered element now: BODY -- & -- clicked element now: BODY

现在只需将鼠标移动一根头发：控制台输出

hovered element now: BODY -- & -- clicked element now: BODY

现在让我们在 Firefox 中做同样的事情，好吗？

只需将鼠标悬停在第一个 span 元素之外而不进入 span 空间：控制台输出

hovered element now: BODY -- & -- clicked element now: undefined

现在单击鼠标左键（mousedown 和 mouseup）：控制台输出

hovered element now: BODY -- & -- clicked element now: undefined

请注意，现在点击的元素显示为 undefined。将其与 chrome 的结果进行比较

现在只需将鼠标移动一根头发：控制台输出

hovered element now: BODY -- & -- clicked element now: BODY

**现在是下一组测试**

现在单击第一个 span 元素外部，不松开鼠标，将其拖动到 span 元素内，然后释放。释放后不要移动鼠标。 chrome中的控制台输出

hovered element now: SPAN -- & -- clicked element now: BODY

FF 的控制台输出

hovered element now: SPAN -- & -- clicked element now: undefined

请注意此处的输出差异。

现在，如果您问我为什么会在浏览器之间发生这种情况，我不知道。我只能说:hover 的伪类不是在 chrome 中触发，而是在 FF 中触发。

那么你问的解决方案是什么？

这是我的解决方法。

仅在该事件发生时手动添加悬停类。这使得 chrome 动态添加类，而在 FF 中它已经处于幸福状态;)

所以现在在fiddle 中再次取消注释这段代码...

$(hoveredElement).mouseenter(function () 
                $(this).addClass('jsHover');
            ).mouseleave(function () 
                $(this).removeClass('jsHover');
            );

如果您愿意，还可以评论控制台输出的最后一部分。

它的作用是在触发我们的小问题的特定事件集发生时，向 span 元素添加一个 jsHover 类（与 css 中的常规 :hover 伪类一起定义）。

完整的代码片段在这里...

$(document).ready(function () 
    var hoveredElement;
    var clickedElement;
    $(document).mousemove(function (event) 
        hoveredElement = event.target.nodeName;

        $(hoveredElement).mouseenter(function () 
            $(this).addClass('jsHover');
        ).mouseleave(function () 
            $(this).removeClass('jsHover');
        );

        //console.log('hovered element now: ', hoveredElement);
        return hoveredElement;
    );
    $(document).click(function (event) 
        clickedElement = event.target.nodeName;
        //console.log('clicked element now: ', clickedElement);
        return clickedElement;
    );
    /*
            $(document).mousemove(function () 
                console.clear();
                console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement);                
            );
            */
);

        .page 
            height:100%;
            width:100%;
            /*background:rgba(12, 132, 49, 0.3);*/
        
        div 
            height:200px;
            width:250px;
            /*background:pink;*/
        
        span 
            /*background-color:cyan;*/
        
        span:hover, span.jsHover 
            background-color:blue;
            color:white;
            font-weight:bold;
        
        .activeElement 
            background:#bfbfbf;
        

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span>before page div span element</span>

<br/>
<hr/>
<div class="page">
    <div> <span>inside pade div span element </span>

        <p>wjhjhewh</p>
    </div>
</div>

希望这会有所帮助。 快乐编码

【讨论】：

谢谢，哇！这是一个很长的答案，让我花时间阅读。

我找到了一个和你类似的方法，成功了，所以保持这个技巧。