CODEWITHSUNDEEP
javascriptjqueryfirefox
Piotrek
Piotrek

Reputation: 11211

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

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/

Upvotes: 7

Views: 1559

Answers (3)

maxime schoeni
maxime schoeni

Reputation: 2857

Here is a solution that does not require to set inputs to user-select:none if you want to keep the fields selectable:

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);
  }
}

Upvotes: 0

Jim Parsons
Jim Parsons

Reputation: 76

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/

Upvotes: 5

alex
alex

Reputation: 1

Thanks. It seems to work in jsfiddle. I have here a situation when the mouseenter event doesn't trigger on FF, when the left mouse button is pressed.

I don't see any evident differences between your examples and our code.

Upvotes: 0

Related Questions