html button not working in labelrenderer in three.js

Question

Html button is not working in label renderer. Is there any solution which I can put in my code. The issue is I'm using both webglrenderer and label renderer .So a lot of issue occur like orbit control is not working buttons not clickable and annotations buttons which I created in runtime is not working

let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
div.addEventListener("mousedown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);
childModel.add( label );

scope_AC.modeler.labelRenderer.setSize( innerWidth, innerHeight );
scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute';
scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
scope_AC.modeler.labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(scope_AC.modeler.labelRenderer.domElement );

when I mark the annotation then my scene stuck without any pointerEvent=none but when i apply this then annotation not clickable

Answer 1

Prisoner849 makes a good point:

try pointerdown instead of mousedown

Here is how your code will look after:

let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
    div.addEventListener("pointerdown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);
childModel.add( label );
    
scope_AC.modeler.labelRenderer.setSize( innerWidth, innerHeight );
scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute'; scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
scope_AC.modeler.labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(scope_AC.modeler.labelRenderer.domElement );

That should do it~