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

Question

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/

Answer 1

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/