Mouse Events stop working

JavaScript
1

I am building an Etch & Sketch of a grid of squares to be colored in by the user when two mouse events are satisfied at the same time. ie., squares colored in when mouseover and mousedown. (I also tried mousemove, but research suggests that should only be used in rare cases, as it can more easily cause side effects.)

The grid of squares is created dynamically with Flexbox containers.

The grid has the Id #grid__container
All individual squares have the Class .grid__squares

I originally accesses each square using a nodeList and a forEach loop, but with research, my code now makes use of event propagation / delegation and the JavaScript Event Object Properties.

The current code just needs one Event Listener set to the outer grid, and then uses event propagation to determine what square is moused over, using the e(vent).target property. And the code uses the generic mouse event object properties to verify the mouse button is down; e.buttons = 1/true when left mouse button down.

function colorSquare() {
  const squaresContainer = document.querySelector(`#grid__container`);
  squaresContainer.addEventListener("mouseover", (e) => {
    if (e.buttons === 1 && e.target.classList.contains(`grid__squares`)) {
      e.target.classList.add("black");
    }
  });
}

Full code codepen link https://codepen.io/FitzBrendan/pen/LYJQLJd

The Etch & Sketch works as desired…until it doesn’t. Intermittently the mouse locks up and does not color with the mouse down. I’m guessing it’s some kind of timing/sync issue with the mouse events. Through research I know that the browser will cycle through the mouse events, and therefore I’m thinking that a mousedown or mouseup event may be missed. is anyone familiar with this issue, and is there a fix.

Any help or things to consider and try would be greatly appreciated.

3

Yes, with maybe a clarification if needed. If the mouse moves over a square and the mouse button is not down, yes, no change to black. But if the mouse button is pressed down while on a square, the square should change to black.

4

this sounds like case for usage of mousedown event. Have you tried to use it instead of mouseover?

5

Thanks for the feedback.
I’ve used to e.buttons property of the mouse event object to track that the mouse is down. The JavaScript object property’s value will be 1/true if the mouse is down. The mousedown event does not work for my requirements, it will only color a square if the mouse is pressed down while over the square. I want the squares to change while holding the mouse down, ie. if the mouse is already down, the mouse down event will not trigger.

6

Just to update and thank everyone that replied to help fix my bug. I continued searching and found a solution.
To recap the issue, when the mouse is over a grid square, and with the mouse button down, the grid square should be colored in with a background color change. But some combination of dragging and clicking over the squares changed the cursor to a hand, indicating a move or drag n drop. And in that mode, squares were no longer getting a background color change, (with the mouse button down).
The fix - adding the user-select attribute, with value set to none to every grid square. I have been able to turn the bug off/on by adding/removing this attribute. But, not sure why this fixes the issue, as the user-select none disables the option to select text, and the grid squares have no content. I can kinda relate the text selection with the cursor going into move or drag n drop mode, but not really sure why a text selection attribute works on an empty div. Does anyone have any thoughts on this?

1 Like
7

With further research I did find some info that states that the user-select attribute can associate with all nodes, not just text.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.