Estoy usando Three.js para mostrar un modelo 3D en el que los usuarios pueden arrastrar la cámara y hacer clic en los objetos para acercarlos. El problema que tengo es que cuando hace clic y arrastra, se lee como un clic y activa la animación, necesito evitar hacer clic al arrastrar, por lo que los clics solo se registran cuando es solo un clic y no hay movimiento del mouse.
function onClick(event) { event.preventDefault(); mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( scene.children, true ); if ( intersects.length > 0 && intersects[0].object.name==="Tree006") { var object = intersects[0].object; gsap.to( camera.position, { duration: 1, x: mesh["Tree006"].position.x, y: mesh["Tree006"].position.y, z: mesh["Tree006"].position.z, onUpdate: function() { controls.enabled = false; camera.lookAt(0,0,0); } } ); console.log( 'Intersection:', intersects[ 0 ] ); } if ( intersects.length > 0 && intersects[0].object.name!=="Tree006") { var object = intersects[0].object; gsap.to( camera.position, { duration: 1, // seconds x: 6, y: 4, z: 6, onUpdate: function() { controls.enabled = true; camera.lookAt( 0,0,0 ); } } ); } }El click del evento solo se activa cuando suelta el botón del mouse sobre el elemento. Por lo tanto, puede establecer alguna bandera en mousedown y restablecer esa bandera en mouseup . Esta bandera le diría al controlador de click que no haga nada.
var btn1 = document.querySelector("#btn1"); var flag = false; btn1.addEventListener('click', function(ev) { if (!flag) { alert(1); } ev.preventDefault(); }) btn1.addEventListener('mousedown', function(ev) { flag = true; console.log("flag to disable click is true"); }) btn1.addEventListener('mouseup', function(ev) { // this is dirty hack, until i find a better solution: setTimeout(function() { flag = false console.log("flag to disable click is false"); }); }) <button id="btn1">no click</button> <button id="btn2" onclick="alert(2)">click</button>