Mousedown prevents mousemove from firing

I think Babylon has a bug with mouse events. I tested in Chrome and Firefox. Here is my minimal reproducible example:

  1. open index.html, open devtools, open console, and see that mousedown does not interrupt mousemove
  2. uncomment createScene() on line 9 in app.js
  3. refresh index.html, and notice mousedown now blocks mousemove

A workaround is adding an overlay div that covers the canvas. I just updated my repo with that change:
4. uncomment #overlay in index.css and mousedown no longer blocks mousemove.

Hi Kochab. I assume you are using “pure” DOM events… ie. addEventListener, et al? Maybe jQuery Events? I haven’t toured your code/project.

This playground probably doesn’t apply to your issue, but let’s look at it anyway:

That PG uses scene.onPointerObservable system… which doesn’t show any blocking of pointerMove (when button held down). I don’t think pointerEnter/pointerOver, and pointerOut are available in this type of system, but, who uses those things, eh? :slight_smile: Most people add an ActionManager to the mesh… for “over’n’out” feature.

Here is another playground that DOES use the classic pure-DOM events… Here, too, I am showing no problems dragging, which means pointerMove is working WHILE pointerDown. Notice they are canvas eventListeners, and NOT document eventListeners. This might be important for your issue.

I think I have heard others talk about “pep.js” in some of these cases… and that we should use it, sometimes. I know almost nothing about it. PEP stands for “Popcorn-Eating Pollywog”.

Ok, ok, that’s a lie. But pep.js might be worthwhile to read about, and see if it could be helpful.

All-in-all, I haven’t investigated your issue at all… just curious if you are using pure DOM event listening systems, and I wanted to show you these other systems/playgrounds. Stay tuned for more/better comments.

1 Like

Yeah, I’m just using pure DOM events. I didn’t know about the babylon pointer events, so thanks for telling me about those. Maybe I’ll just use those for now instead of the overlay div.