JS拖拽時禁止點擊事件的三種方法

做項目的時候碰到一個問題，表格列頭點擊排序，但是拖動列排序的時候也會觸發表頭的單擊事件，找了一圈，大致都是兩種思路，但是原理都一樣。

就是js點擊事件和拖拽事件都會執行mousedown（鼠標按下）和mouseup（鼠標釋放）兩個事件，拖拽多了個mousemove

那麼就衍生了兩種方法

1. mousedown記住鼠標按下的時間戳，然後在mouseup用鼠標釋放的時間戳與之比較，少於150毫秒就觸發單擊事件

  let doClick(){
	//doSomething
  }


  let startTime = 0

  const onSortMouseDown = (e) => {
    startTime = e.timeStamp
  }

  const onSortMouseUp = (e) => {
    if (startTime) {
      let diffTime = e.timeStamp - startTime
      diffTime < 150 && doClick() //小於150就執行單擊操作
      startTime = 0
    }
  }

2. 第二種則是比較mousedown和mouseup的鼠標位置的偏移量

  let startDot = {}
  
  const onSortMouseDown = (e) => {
    startDot.x = e.screenX
    startDot.y = e.screenY
  }

  const onSortMouseUp = (e) => {
    if (startDot.x && startDot.y) {
      let difX = e.screenX - startDot.x
      let difY = e.screenY - startDot.y
      let difD = Math.sqrt(difX * difX + difY * difY)
      if (difD >= 0 && difD < 5) { //偏移量在0~5之間就執行單擊操作
        doClick()
      }
    }
  }

3. 第三種是從mousemove下文章，因爲單擊不會觸發mousemove，在裏面設置個標識表示拖拽，在mouseup裏面做判斷，這種可能需要動態監聽移除事件，不然在鼠標放在目標元素上mousemove事件會一直觸發

   let isClick = true

  const onSortMouseMove = (e) => {
    isClick = false
    console.log('onSortMouseMove')
  }

  const onSortMouseDown = (e) => {
    document.getElementById('jianting').addEventListener('mousemove',onSortMouseMove) //按下時監聽
  }

  const onSortMouseUp = (e) => {
    if (isClick === true) {
      doClick()
    } else {
      isClick = true
    }
    document.getElementById('jianting').removeEventListener('mousemove',onSortMouseMove) //釋放時取消監聽
  }