Jump to content

How to stop mousedown sticking when moving out of canvas?


Recommended Posts

This is a common problem and I've searched all over the internet for a solution but haven't found one that works with Babylon.js

If you click down on a canvas then move off the canvas and release the mouse button, then move back to the canvas it seems to be stuck on "down".  The camera is moving even though you've let go of the mouse button.

I've noticed that this doesn't happen with the Babylon.js playground.  You can control the camera even after the mouse moves out of the canvas, and once you let go it will release it on the canvas.  Does anyone know how to do this?  I read somewhere about using setCapture on the canvas but that function doesn't exist on Chrome.

Link to comment
Share on other sites

Hey @ozRocker 

you can capture the mouse going off your scene/canvas with javascript and "mantually" reset the mouse.

window.addEventListener("mouseout", function () {
  //reset mouse

i can't remember the rest off the top of my head sorry, you'll have to google that :P



take note that this specific code using window, will only work if your canvas fills your entire webpage and/or the mouse is moved away from it, e.g. to the bookmark/url/etc.. areas of a browser or the toolbar of a OS.

Link to comment
Share on other sites

That's odd, which browser are you using if i may ask?

and if it's chrome or firefox, try again with 2.4 using edge if you have it installed and see if it still occurs.

2.4 seems to have a few bugs yet to be fixed when it comes to chrome, firefox & pointer events.

Link to comment
Share on other sites

I've recreated it here: http://www.punkoffice.com/mousetest/

The code is straight from the default Playground scene.

If you drag the mouse out of the canvas to the left or the right and let go of the button, it remains stuck down over the canvas, so if you return to the canvas the camera will move even though no buttons are pressed.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...