title: How to prevent click on raycasted object during mousemove?
body: <p>I have a group of clickable objects that can be spun either using the scroll wheel or by clicking and dragging. The problem I am having is when you drag and then release on top of an object, it will launch the click animation. </p>
  
  <p><a href="https://jsfiddle.net/jacob_truax/j4okp5c6/" rel="nofollow noreferrer">Here</a> is a link to a fiddle of the simplified project. </p>
  
  <p>Does anyone know how to stop the click from being recorded during the drag? It seems like its being a bit more difficult because they are raycasted objects.</p>
  
  <p>My js functions:</p>
  
  <pre><code>document.addEventListener("mousedown", function () {
      isMouseDown = true
      startX = event.pageX
      startY = event.pageY
      document.body.style.cursor = 'grabbing';
    })
  
    document.addEventListener("mouseup", function () {
      isMouseDown = false
      document.body.style.cursor = 'grab';
    })
  
    document.addEventListener("mousemove", function (event) {
      if (isMouseDown) {
        document.body.style.cursor = 'grabbing'
      }
  
      aimX = ((window.innerWidth / 2) - event.pageX) * 0.35
      aimY = ((window.innerHeight / 2) - event.pageY) * 0.5
  
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
      raycaster.setFromCamera(mouse, camera)
  
      const intersections = raycaster.intersectObjects(group.children)
  
      if (intersections.length &gt; 0) {
        if(projectHov){
          if (INTERSECTED != intersections[0].object) {
              if (INTERSECTED)
              INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
              INTERSECTED = intersections[0].object;
              INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
              //setting up new material on hover
              INTERSECTED.material.color.setHex( 0xadadad );
              if (INTERSECTED){
                if(projectHov){
                  document.body.style.cursor = "pointer"
                }
              }
          }
        }
  
        } else {
            if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
            document.body.style.cursor = "grab";
            INTERSECTED = null;
        }
  
  // Moving the objects ==========================
      if(isMouseDown) {
        let currentRotation = new THREE.Matrix4();
                currentRotation.makeRotationFromEuler(group.rotation);
  
                let newEuler = new THREE.Euler(0, ((event.pageX - startX) + (event.pageY - startY)) / 325, 0);
                let newRotation = new THREE.Matrix4();
                newRotation.makeRotationFromEuler(newEuler);
  
                let finalRotation = new THREE.Matrix4();
                finalRotation.multiplyMatrices(newRotation, currentRotation);
  
                group.rotation.setFromRotationMatrix(finalRotation);
  
                startX = event.pageX;
                startY = event.pageY;
      }
    })
  section.addEventListener('click', onDocumentMouseDown, false);
  
    function onDocumentMouseDown(event) {
        event.preventDefault();
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        const intersections = raycaster.intersectObjects(objects)
  
  // Animation =================================
            if (intersections.length &gt; 0){
              if(projectHov){
                tl.play();
  
                tl.to(backTag, 1, {
                  delay: 1.25,
                  autoAlpha:1,
                }, 0);
  
              }
  
  // Animation ===================================
              if (intersections[0].object == old ) {
                if(projectHov){
                  tlOld.play();
                  projectHov = false
                  tlOld.to(old, 1.5, {three:{scaleX: 1.5, scaleY: 1.5, x:0, y:0, z:0}, ease:Power2.easeInOut}, 0);
                  tlOld.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
                  tlOld.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
                  tlOld.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
                  tlOld.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0);
                groupRotate = false
              }
  
              } 
  </code></pre>