Firefox：按住鼠标按钮时，鼠标悬停不起作用 [英] Firefox: mouseover doesn't work while mouse button is pressed

问题描述

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

我想突出显示< table>中的一些< td> ; 使用鼠标。这个视频是在Chrome上录制的，在那里效果很好。不幸的是，它不在Firefox上。

以下是它的工作方式：

1. 用户单击表格中的第一个单元格
   
2. 他将鼠标拖动到其他单元格
   
3. 单元格被高亮显示
   
（＃productList）。（＃productList）。（$ mousedown，td，function（）{
//保存从何处开始
}
$ b $（＃productList）on（mouseover mouseenter mouseover hover ，td，function（）{
//更新突出显示，修改类
//当我点击< td>之一并将鼠标拖到其他地方时，这个函数不会被触发



$ b $ #productList 是<在Chrome浏览器中一切正常，firefox似乎不会触发mouseenter事件（和任何其他的其他的我试过）。鼠标悬停只适用于我点击的对象。当我拖动鼠标的时候，Firefox似乎只考虑了焦点对象。



我可以绕过吗？

编辑：
一个重要的事情要提到：一个< input> 在每个单元格中。这可能会导致问题
https://jsfiddle.net/q8v7f6uv/6/ p>


解决方案

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





关于mousedown：

  $（this）.css（background，red）; 
  

在mouseenter上：



  $（this）.css（background，yellow）; 
  




编辑： >当你编辑你的问题后，它不在Firefox中工作，因为文本框正在浏览器中拖动，就像你如何突出显示文本并将其拖放到另一个文本框中一样。 b
$ b

你可以用css禁用这个功能： user-drag：none; 和 user-select：none; 它可以解决你的问题。注意为 input 添加的额外css规则。 https://jsfiddle.net/q8v7f6uv/10/




Here is what I'm trying to make: https://gfycat.com/ValidEmbarrassedHochstettersfrog

I want to highlight some of <td> objects in <table> using mouse. This video is recorded on Chrome, where it works perfectly. Unfortunately it doesn't on firefox.

Here is how it works:

1. User clicks on first cell in table
2. He drags mouse to other cell
3. Cells are being highlighted

Code:

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

Where #productList is <table>.

While in Chrome everything works as expected, firefox seem to not fire mouseenter event (and any other that I tried). Mouseover works only on objects that I've clicked on. It seems like Firefox considers only focused objects when I drag using mouse.

How can I bypass it?

EDIT: One important thing to mention: I have an <input> in each cell. This could cause problems https://jsfiddle.net/q8v7f6uv/6/

解决方案

What version of Firefox are you using? I tried to replicate in a simple manner what you described, and it seems to work in FF (47.0.1) and Chrome.

On mousedown:

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

On mouseenter:

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

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

EDIT:

After you made the edit to your question.. It is not working in Firefox because the textbox is being 'dragged' in the browser, like how you can highlight text and drag and drop it into another text field.

You can disable this functionality with css: user-drag: none; and user-select: none; which fixes your problem. Notice the extra css rule I added for input. https://jsfiddle.net/q8v7f6uv/10/

这篇关于Firefox：按住鼠标按钮时，鼠标悬停不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！