js的鼠标事件

image.png

拖拽常用事件

onmousedown 鼠标按下触发事件
onmousemove 鼠标按下时持续触发事件
onmouseup 鼠标抬起触发事件

click点击事件=mouseup+mousedown
drag拖拽=mousedown+mousemove+mouseup

当鼠标在div上【移动】或者【按下左键拖动】的时候，都会触发onmousemove事件；

<div id="drag" οnmοusedοwn="down();" οnmοuseup="up();" οnmοusemοve="move();"></div>

问题：怎样区分鼠标是单击弹起还是拖动后弹起呢？
处理一：基于时间；
在onmousedown中记录鼠标按下的位置，在onmouseup中记录鼠标弹起的位置，然后比较这2个位置的差距。
如果距离差距不大，则是鼠标【单击】后弹起；
如果距离相差较大，则是鼠标【拖动】后弹起。

<script>
  var timer = null
  var isDrag = false

  function down () {
    console.log('onmousedown')
    //由于onmousedown每次都会调用的，在这里初始化一下这个变量
    isDrag = false
    //延迟100ms
    timer = setTimeout(setDragTrue, 200)
  }

  function setDragTrue () {
    isDrag = true
  }

  function move () {
    //能够使用isDrag来推断是移动还是拖动
  }

  function up () {
    if (!isDrag) {
      //先清除timer
      clearTimeout(timer)
      console.log('onmouseup')
    } else {
      isDrag = false
      console.log('draging over.')
    }
  }

</script>