Canvas not respond to 'mousedown' and 'mouseup' Event

Bugs
1

I’ve tried it in the PG expamle and found out that canvas can not respond to 'mousedown 'and ‘mouseup’ event, but is able to respond to ‘mousemove’ event.
Tested it on Chrome, Edge and Firefox, all the same.
This seems to be a bug existed for a long time, but none have been done.

A demo is here, just paste the code on PG.

var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);

// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;

// Our built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

return scene;

};

let canvas = document.getElementById(‘renderCanvas’);
canvas.onmousedown = ()=>{
console.log(‘mousedown’);
}

canvas.onmouseup = ()=>{
console.log(‘mouseup’);
}

canvas.onmousemove = ()=>{
console.log(‘mousemove’);
}

2

I think this has to do with the scene capturing the pointer events, I’ll tag @PolygonalSun to give a better explanation

2 Likes
4

I know that Babylon.js works with pointerup/down events (unless you’re on MacOS/iOS) for input so my guess is that there’s some listener that is explicitly listening for mouseup/down and stopping the event from bubbling up to the canvas. @Richardo, have you seen this behavior in BJS code, outside of the playground?

1 Like
5

Yes I have, it is not working right now in my own BJS scene. P.S my BJS version is 4.2.

6

I also tried another PC with the same project code, and the mousemove/mouseup is also not working.

7

I have tested pointerup/down and they worked. However, I have a need to listen for both Right and Left pointer Down at the same time（just like how we play that minesweeper game）, and poinrterup/down won’t do it, it won’t listen another pointerDown event when one pointerDown event is already ongoing.

8

Okay, so I figured out the issue. What’s going on is that there’s a bug with browsers (maybe by design?) where calling evt.preventDefault() inside of the context of a pointerdown will prevent mousedown and mouseup events from firing. As far as how to address this, I could see a few possible ways.

First, you could manually disable preventDefault usage. If you’re using camera inputs, setting the noPreventDefault param to true when attaching your camera controls and setting scene.preventDefaultOnPointerDown to true should enable the events to fire. Another option would be to create a listener that takes a PointerEvent and uses that info to create a MouseEvent and dispatches it to the canvas. Finally, if possible, you could work with PointerEvents as they have the properties of MouseEvents but also have things like pointerId.

10

Thanks！ I would try it later but I think it will do definetly.
You my friend, is the real hero.