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

问题描述

全部:

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

Chrome 40 遇到的问题是:

我设置了一个样式:跨度 {背景颜色:红色；}跨度:悬停{背景颜色:蓝色；}<span>测试区域</span>

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

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

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

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

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

因此，我开始设计一个简单的代码片段，用于跟踪触发悬停和点击事件的事件.

你可以在这里找到这个片段小提琴.

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

$(document).mousemove(function () {控制台.clear();console.log('现在悬停的元素:'+hoveredElement+' -- & -- '+'现在点击的元素:'+ clickedElement);});

然后评论下面的部分，

$(hoveredElement).mouseenter(function () {$(this).addClass('jsHover');}).mouseleave(函数 () {$(this).removeClass('jsHover');});

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

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

在 Chrome 中

1. 鼠标悬停在第一个 span 元素外，不进入 span 空间:控制台输出

   现在悬停的元素:BODY -- &-- 现在点击的元素:未定义

2. 现在单击鼠标左键(mousedown 和 mouseup):控制台输出

   现在悬停的元素:BODY -- &-- 现在点击的元素:BODY

3. 现在只需移动鼠标一点点:控制台输出

   现在悬停的元素:BODY -- &-- 现在点击的元素:BODY

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

1. 鼠标悬停在第一个 span 元素外，不进入 span 空间:控制台输出

   现在悬停的元素:BODY -- &-- 现在点击的元素:未定义

2. 现在单击鼠标左键(mousedown 和 mouseup):控制台输出

   现在悬停的元素:BODY -- &-- 现在点击的元素:未定义

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

3. 现在只需移动鼠标一点点:控制台输出

   现在悬停的元素:BODY -- &-- 现在点击的元素:BODY

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

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

   现在悬停的元素:SPAN -- &-- 现在点击的元素:BODY

   FF 的控制台输出

   现在悬停的元素:SPAN -- &-- 现在点击的元素:未定义

请注意此处的输出差异.

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

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

这是我的解决方法.

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

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

$(hoveredElement).mouseenter(function () {$(this).addClass('jsHover');}).mouseleave(函数 () {$(this).removeClass('jsHover');});

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

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

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

$(document).ready(function () {变量悬停元素；var clickedElement;$(文档).mousemove(函数(事件){hoveredElement = event.target.nodeName;$(hoveredElement).mouseenter(function () {$(this).addClass('jsHover');}).mouseleave(函数 () {$(this).removeClass('jsHover');});//console.log('现在悬停的元素:', hoveredElement);返回悬停元素；});$(文档).click(函数(事件){clickedElement = event.target.nodeName;//console.log('现在点击的元素:', clickedElement);返回点击元素；});/*$(document).mousemove(function () {控制台.clear();console.log('现在悬停的元素:'+hoveredElement+' -- & -- '+'现在点击的元素:'+ clickedElement);});*
The End