Job/Tip

mouse down move up

하늘치 2022. 1. 4. 15:51
반응형

case1. 마우스 클릭(down), 클릭 후 드래그, 드래그 후 마우스 UP

case2. 마우스 클릭(down), 마우스 UP

 

 

 

document.addEventListener("DOMContentLoaded", function(){


  // Handler when the DOM is fully loaded
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

      let moved;
      let clicked;
      var elements = document.getElementsByClassName("class name");
      var downListener = function() {
          clicked = true;
          moved = false;
      };
      var hoverListener = function() {
      }
      var moveListener = function() {
          moved = true;
      };
      var upListener = function() {
        if (moved == true) {
          //console.log('moved');
        } else {
          //console.log('not moved');
          var href = this.getAttribute("data-href");
          location.href = href;
        }
      };

      for (var i = 0; i < elements.length; i++) {
          elements[i].addEventListener("pointerdown", downListener, false);
          elements[i].addEventListener("pointermove", hoverListener, false);
          elements[i].addEventListener("pointermove", moveListener, false);
          elements[i].addEventListener("pointerup", upListener, false);
      }
  
  // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 

});

 

 

 

 

References:

https://stackoverflow.com/questions/41181372/chrome-mousedown-and-mouseup-events-no-longer-working-other-browsers-are-fine

 

Chrome mousedown and mouseup events no longer working, other browsers are fine

As of today (or yesterday, didn't notice it then), mousedown and mouseup events are no longer working. I am on Chrome Version 55.0.2883.95 (64-bit). Safari and FireFox are working fine (I am on a mac

stackoverflow.com

// Put these in seperate function instead of anonymous ones
// since you will need them later to deregister the event
function onPointerDown(event){ /** Do stuff here **/ }
function onPointerHover(event){ /** Do stuff here **/ }
function onPointerMove(event){ /** Do stuff here **/ }
function onPointerUp(event){ /** Do stuff here **/ }

// Add event listeners
if (isEventSupported("onpointerdown")) {
    domElement.addEventListener("pointerdown", onPointerDown, false);
    domElement.addEventListener("pointermove", onPointerHover, false);
    domElement.addEventListener("pointermove", onPointerMove, false);
    domElement.addEventListener("pointerup", onPointerUp, false);
} else if (isEventSupported("ontouchstart")) {
    domElement.addEventListener("touchstart", onPointerDown, false);
    domElement.addEventListener("touchmove", onPointerHover, false);
    domElement.addEventListener("touchmove", onPointerMove, false);
    domElement.addEventListener("touchend", onPointerUp, false);
} else if (isEventSupported("onmousedown")) {
    domElement.addEventListener("mousedown", onPointerDown, false);
    domElement.addEventListener("mousemove", onPointerHover, false);
    domElement.addEventListener("mousemove", onPointerMove, false);
    domElement.addEventListener("mouseup", onPointerUp, false);
}

// Remove event listeners
if (isEventSupported("onpointerdown")) {
    domElement.removeEventListener("pointerdown", onPointerDown, false);
    domElement.removeEventListener("pointermove", onPointerHover, false);
    domElement.removeEventListener("pointermove", onPointerMove, false);
    domElement.removeEventListener("pointerup", onPointerUp, false);
} else if (isEventSupported("ontouchstart")) {
    domElement.removeEventListener("touchstart", onPointerDown, false);
    domElement.removeEventListener("touchmove", onPointerHover, false);
    domElement.removeEventListener("touchmove", onPointerMove, false);
    domElement.removeEventListener("touchend", onPointerUp, false);
} else if (isEventSupported("onmousedown")) {
    domElement.removeEventListener("mousedown", onPointerDown, false);
    domElement.removeEventListener("mousemove", onPointerHover, false);
    domElement.removeEventListener("mousemove", onPointerMove, false);
    domElement.removeEventListener("mouseup", onPointerUp, false);
}

 

 

 

 

 

반응형