js的鼠標事件

image.png

拖拽常用事件

onmousedown 鼠標按下觸發(fā)事件
onmousemove 鼠標按下時持續(xù)觸發(fā)事件
onmouseup 鼠標抬起觸發(fā)事件

click點擊事件=mouseup+mousedown
drag拖拽=mousedown+mousemove+mouseup

當鼠標在div上【移動】或者【按下左鍵拖動】的時候，都會觸發(fā)onmousemove事件；

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

問題：怎樣區(qū)分鼠標是單擊彈起還是拖動后彈起呢？
處理一：基于時間；
在onmousedown中記錄鼠標按下的位置，在onmouseup中記錄鼠標彈起的位置，然后比較這2個位置的差距。
如果距離差距不大，則是鼠標【單擊】后彈起；
如果距離相差較大，則是鼠標【拖動】后彈起。

<script>
  var timer = null
  var isDrag = false

  function down () {
    console.log('onmousedown')
    //由于onmousedown每次都會調(diào)用的，在這里初始化一下這個變量
    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>