click, drag 구분하기(with vue) 😯😊

며칠 전, 마우스 클릭과 드래그를 구분해야 했다.
리스트가 있는데, 클릭했을 때는 상세 정보로 이동하고 드래그해서 텍스트를 복사하고 싶은 상황이었다.
기존에는 click event가 있으면 상세 페이지로 이동하게 해서, 드래그를 하고 싶어서 상세 페이지로 이동했다.

마우스 이벤트를 찾아보니 click 이벤트만 있는 게 아니라 다른 것도 있었다.
그것들을 활용하니 클릭과 드래그를 구분할 수 있었다.

(아래 링크들은 MDN 사이트)

mousedown event : 요소 안에서 포인터가 눌렸을(press) 때 발생

mousemove event : 요소 안에서 포인터가 움직일 때 발생

mouseup event : 요소 안에서 포인터가 release 될 때 발생

click event와 차이점 : 클릭 이벤트는 full click action 후에(마우스가 눌렸다가 떼진 후에) 발생함.

<template>
<div id="app">
   <h1>드래그와 클릭</h1>
  <span>내 깃허브 주소 : </span>
    <span
         @mousedown="onMouseDown"
         @mousemove="onMouseMove"
         @mouseup="!isDrag && move()">
   https://github.com/tjdls111
  </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrag: false
    };
  },
  methods: {
    onMouseDown() {
      console.log('onMouseDown')
      this.isDrag = false
    },
      onMouseMove() {
      console.log('onMouseMove')
      this.isDrag = true
    },
     move() {      window.open('https://github.com/tjdls111')
    },
  }
};
</script>

See the Pen Untitled by Seoin (@tjdls111) on CodePen.

-코드펜으로도 작성해봤다 ㅎㅎ

url을 클릭하면 해당 url의 탭이 생성되고, url을 드래그하면 아무 일도 일어나지 않는다.

 

참고 자료

https://www.geeksforgeeks.org/how-to-differentiate-mouse-click-and-drag-event-using-javascript/