드래그 할때, 클릭 이벤트 방지 하는 방법

아래와 같이 클릭 이벤트를 만들어서 사용하고 있었습니다.

하지만, 드래그할 때도 아래와 같이 클릭 이벤트가 발생하였습니다.

 

저는 단지 드래그 이후 복사를 하고 싶었는데, 클릭 이벤트를 발생시키고 싶지 않았습니다.

const div = document.querySelector('div');

div.addEventListener('click', () => {
   alert('click');
});

 

클릭 이벤트 방지 시키는 방법

아래와 같이 mousedown, mousemove 이벤트를 이용해서 동작이 드래그인지 판단합니다.

그 이후 mouseup 이벤트에서 click 이벤트 로직을 실행시킵니다.

const div = document.querySelector('div');

let isDrag;

div.addEventListener('mousedown', () => {
  isDrag = false;
});

div.addEventListener('mousemove', () => {
  isDrag = true;
});

div.addEventListener('mouseup', () => {
  if (!isDrag) {
    // YOUR_CLICK_EVENT
    alert('hi');  
  }
});