火狐:按下鼠标按钮时鼠标悬停不起作用

Firefox: mouseover doesn't work while mouse button is pressed

本文关键字：鼠标 悬停 不起作用 按钮 火狐      更新时间：2023-09-26

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

我想使用鼠标突出显示<table>中的一些<td>对象。该视频录制在Chrome上，在那里它运行良好。不幸的是，它不在火狐上。

以下是它的工作原理：

  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/

你使用的是哪个版本的 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 中工作。我在这里遇到一种情况，当按下鼠标左键时，鼠标输入事件不会在 FF 上触发。

我看不出您的示例与我们的代码之间有任何明显的差异。

如果要

使字段保持可选，则不需要将输入设置为 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);
  }
}
相关文章：