JS拖拽时禁止点击事件的三种方法

做项目的时候碰到一个问题，表格列头点击排序，但是拖动列排序的时候也会触发表头的单击事件，找了一圈，大致都是两种思路，但是原理都一样。

就是js点击事件和拖拽事件都会执行mousedown（鼠标按下）和mouseup（鼠标释放）两个事件，拖拽多了个mousemove

那么就衍生了两种方法

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
    }
  }

第二种则是比较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()
      }
    }
  }

第三种是从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) //释放时取消监听
  }

秒客网

JS拖拽时禁止点击事件的三种方法

相关文章