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
Prisoner849 makes a good point:
try
pointerdowninstead ofmousedown
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~