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

Question

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

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

下面是它的工作原理：

1. 用户点击表格中的第一个单元格
2. 他将鼠标拖到其他单元格
3. 正在突出显示单元格

代码：

$("#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/

Answer 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. https://jsfiddle.net/q8v7f6uv/10/