Firefox：按下鼠标按钮时鼠标悬停不起作用答案

【问题标题】：Firefox: mouseover doesn't work while mouse button is pressedFirefox：按下鼠标按钮时鼠标悬停不起作用
【发布时间】：2016-07-06 10:23:01
【问题描述】：

这是我想要做的： https://gfycat.com/ValidEmbarrassedHochstettersfrog

我想使用鼠标突出显示<table> 中的一些<td> 对象。该视频录制在 Chrome 上，可以完美运行。不幸的是，它不在 Firefox 上。

这是它的工作原理：

用户点击表格中的第一个单元格
他将鼠标拖到其他单元格
单元格被突出显示

代码：

$("#productList").on("mousedown", "td", function () {
   //save from where to start
}

$("#productList").on("mouseover mouseenter mouseover hover", "td", function () {
   //update highlighting, modify classes
   //this function isn't fired when I click on one of <td> and drag mouse somewhere else
}

#productList 是 <table>。

虽然在 Chrome 中一切正常，但 firefox 似乎不会触发 mouseenter 事件（以及我尝试过的任何其他事件）。鼠标悬停仅适用于我单击的对象。当我使用鼠标拖动时，Firefox 似乎只考虑焦点对象。

如何绕过它？

编辑：需要提及的一件重要事情：我在每个单元格中都有一个<input>。这可能会导致问题 https://jsfiddle.net/q8v7f6uv/6/

【问题讨论】：

标签： javascript jquery firefox

【解决方案1】：

您使用的是哪个版本的 Firefox？我试图以一种简单的方式复制你描述的内容，它似乎在 FF (47.0.1) 和 Chrome 中工作。

鼠标按下时：

$(this).css("background", "red");

鼠标进入：

$(this).css("background", "yellow");

https://jsfiddle.net/q8v7f6uv/1/

编辑：

在您对问题进行编辑后。它在 Firefox 中不起作用，因为文本框在浏览器中被“拖动”，例如如何突出显示文本并将其拖放到另一个文本字段中。

您可以使用 css 禁用此功能：user-drag: none; 和 user-select: none; 可以解决您的问题。请注意我为input 添加的额外css 规则。 https://jsfiddle.net/q8v7f6uv/10/

【讨论】：

对不起，我没有告诉你一件重要的事情。我在每个单元格中都输入了文本jsfiddle.net/q8v7f6uv/6
正如您在浏览器控制台中看到的，当您单击一个单元格并拖动到另一个单元格时，不会调用 mouseenter
很酷，但缺点是输入字段中的文本不再可选择......
但我想要user-select: text。它不适用于user-select: text。还有其他解决方案吗？

【解决方案2】：

谢谢。它似乎在 jsfiddle 中工作。我这里有一种情况，当鼠标左键被按下时，鼠标输入事件没有在 FF 上触发。

我看不出你的例子和我们的代码有什么明显的区别。

【讨论】：