Im using Three.js to display a 3d model which users can drag the camera around and click objects to zoom in on them. The issue I'm having is that when you click and drag it reads it as a click and triggers the animation, I need to prevent clicking when dragging, so clicks are only registered when it is just a click and no mouse movement.
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 );
}
} );
}
}Event click is only fired when you release the mouse button over the element. So you can set some flag on mousedown and reset that flag on mouseup. This flag would tell the click handler not to do anything.
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>