Firefox：鼠标按键按下时，鼠标悬停功能无法使用

Question

以下是我想要实现的内容：https://gfycat.com/ValidEmbarrassedHochstettersfrog

我想使用鼠标突出显示<table>中的一些<td>对象。这个视频是在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/

- Piotrek

Answer 1

你使用的是哪个版本的Firefox浏览器？我试图简单地复制你所描述的，并且它似乎在Firefox（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/

- Jim Parsons

---

抱歉，我忘了告诉你一件重要的事情。每个单元格内都有输入文本 https://jsfiddle.net/q8v7f6uv/6/ - Piotrek

正如您在浏览器控制台中所看到的，当您单击一个单元格并拖动到另一个单元格时，并不会调用mouseenter事件。 - Piotrek

很酷，但缺点是输入字段内的文本不再可选择... - Neo

但我想要 user-select: text。它与 user-select: text 不起作用。还有其他解决方案吗？ - Mr_Perfect

Answer 2

谢谢。在jsfiddle上似乎可以工作。我遇到了这样的情况，当按下鼠标左键时，mouseenter事件在FF上没有触发。

我没有看到你的示例和我们的代码之间有任何明显的区别。

- alex

Answer 3

这里有一个解决方案，如果您想保持字段可选择，则不需要将输入设置为user-select:none：

const onMouseUp = event => {
  document.removeEventListener("mouseup", onMouseUp);
  document.removeEventListener("mousemove", onMouseMove);
  // -> selection complete
}

const onMouseMove = event => {
  const elementUnderPoint = document.elementFromPoint(event.clientX, event.clientY);
  const target = elementUnderPoint && elementUnderPoint.closest("td");
  if (target) {
    // -> update selection
  }
}

for (let element of document.getElementById("productList").querySelectorAll("td")) {
  element.onmousedown = event => {
    // -> start selection
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
  }
}

- maxime schoeni