Mouseup problem with orbit controls

I had the issue of the mouseup event not fireing for an unkown reason.
Using the chrome dev tool I was able to see that orbit controls use the mouse events as well. Then I removed these events in the dev tools, just for testing. And all of a sudden my mouseup event worked properly.
Next I looked up this forum and found one thread with a similar question:

But I could’nt find any fitting answer. But I also saw, that the orbit controls events are not bound to the canvas (renderers’ domElement) but its parent. So I tried the same. And violá events work!

 this.m_renderer.domElement.addEventListener('mousedown' , (e) => { 
            this.m_tmpMousePosition = {"x": e.clientX , "y": e.clientY } 
            console.log("mouse down"); //works
        this.m_renderer.domElement.addEventListener('pointerup' , (e) => {
            console.log("pointer up"); //no, because bound to canvas
        this.m_renderer.domElement.addEventListener('mouseup' , (e) => {
            console.log("mouse up"); //no because bound to canvas
        this.m_renderer.domElement.parentNode.addEventListener('click' , (e) => {
            console.log("click"); //yes because bound to parent
        this.m_renderer.domElement.parentNode.addEventListener('dblclick' , (e) => {
            console.log("double click"); //yes because bound to parent
        this.m_renderer.domElement.oncontextmenu = (e) => {
            console.log("context menu"); //works
        window.addEventListener('keyup', (e) => { 
            console.log("key up"); //works

Binding “mouseup” to the parentNode will make that event fire again. And the orbit controls seem not to affected in any way.

So just in case somebody struggles this issue as well, this might help you as well and therefore save time and brain-damage :slight_smile:

1 Like