javascript - 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 添加的额外 css 规则。 https://jsfiddle.net/q8v7f6uv/10/