# Mousedown prevents mousemove from firing

**URL:** <https://forum.babylonjs.com/t/mousedown-prevents-mousemove-from-firing/7810>\
**Category:** Bugs\
**Created:** [December 31, 2019, 8:29pm UTC](https://forum.babylonjs.com/t/mousedown-prevents-mousemove-from-firing/7810 "2019-12-31T20:29:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kochab](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@Kochab](https://forum.babylonjs.com/u/Kochab)\
**Post date:** [December 31, 2019, 8:29pm UTC](https://forum.babylonjs.com/t/mousedown-prevents-mousemove-from-firing/7810/1 "2019-12-31T20:29:24Z")

</div>

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

> **[rokit/babylon-bug](https://github.com/rokit/babylon-bug)**
>
> Contribute to rokit/babylon-bug development by creating an account on GitHub.

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.

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [December 31, 2019, 9:37pm UTC](https://forum.babylonjs.com/t/mousedown-prevents-mousemove-from-firing/7810/2 "2019-12-31T21:37:09Z")

</div>

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:

[https://www.babylonjs-playground.com/#VE33T#15](https://www.babylonjs-playground.com/#VE33T#15)

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? 🙂 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… [https://playground.babylonjs.com/#UZ23UH#0](https://playground.babylonjs.com/#UZ23UH#0). 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.

---

<div class="post-metadata">

**Author:** ![Kochab](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@Kochab](https://forum.babylonjs.com/u/Kochab)\
**Post date:** [December 31, 2019, 11:26pm UTC](https://forum.babylonjs.com/t/mousedown-prevents-mousemove-from-firing/7810/3 "2019-12-31T23:26:51Z")

</div>

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.