Question

以下是我尝试制作的内容： https://gfycat.com/ValidEmbarrassedHochstettersfrog

我想使用鼠标在<td>中突出显示一些<table>个对象。此视频录制在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事件（以及我尝试过的任何其他事件）。 Mouseover仅适用于我点击过的对象。当我使用鼠标拖动时，Firefox似乎只考虑聚焦对象。

我该如何绕过它？

编辑：值得一提的是：我在每个单元格中都有一个<input>。这可能会导致问题 https://jsfiddle.net/q8v7f6uv/6/

Answer 1

您使用的是哪个版本的Firefox？我试图以简单的方式复制你所描述的内容，它似乎适用于FF（47.0.1）和Chrome。

关于mousedown：

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

在mouseenter上：

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

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

编辑：

在对您的问题进行编辑之后..它在Firefox中无法正常工作，因为文本框正在被拖动＆＃39;在浏览器中，如何突出显示文本并将其拖放到另一个文本字段中。

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

Answer 2

感谢。它似乎适用于jsfiddle。我有一个情况，当按下鼠标左键时，鼠标中心事件不会在FF上触发。

我没有看到您的示例与我们的代码之间存在明显差异。

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

2 个答案: