Html Question posted in
Some basic documentation can be found here.

Html – onMouseDown does not fire until after the mouse is released

EDIT: possibly a dupe of this: How can I make Mousedown/Mouseup trigger on mobile devices?

In this setup, "onMouseDown" will not appear in the log until after I release the mouse. I am on Chrome with Linux Mint.

EDIT: Here’s a huge clue as to what’s going on that I just discovered. This is only happening when I go into the Chrome dev tools and click on "toggle device toolbar" which puts the screen into mobile mode.

Code:

  useEffect(() => {
    const onMouseUp = () => {
      console.log('onMouseUp')
    }

    const onMouseDown = () => {
      console.log('onMouseDown')
    }

    window.onmouseup = onMouseUp
    window.onmousedown = onMouseDown

    return () => {
      window.onmouseup = null
      window.onmousedown = null
    }
  }, [])

Does anybody have any insight into this? I am completely at a loss here.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the Chrome dev tools in mobile mode, onMouseDown does not trigger the same way it does in desktop mode. Adding in mobile events such as onTouchStart will solve this problem (assuming the cause of the problem for you was the same for me.)


  2. 0

    John Miller’s answer is correct in general sense – events for touch devices are different than mouse devices. And when touch devices first started to come around they had to make some decisions so that the web wouldn’t break on touch devices, so they mapped certain mouse events to some touch counterpart. You will likely run into problems trying to handle both mouse events and touch events in a sane way.

    Fortunately, Pointer Events were created to help alleviate this issue and create interoperability between any device with a "pointer".

    Here’s the main points:

    • Pointer events inherits from mouse events
    • Helps handle any pointer: mouse, stylus/pen, touch, etc
    • Handles multitouch: touchscreens with a mouse, multi-touch (ex. pinch zoom), etc
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search