js的鼠標(biāo)事件

image.png

拖拽常用事件

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

click點(diǎn)擊事件=mouseup+mousedown
drag拖拽=mousedown+mousemove+mouseup

當(dāng)鼠標(biāo)在div上【移動(dòng)】或者【按下左鍵拖動(dòng)】的時(shí)候，都會(huì)觸發(fā)onmousemove事件；

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

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

<script>
  var timer = null
  var isDrag = false

  function down () {
    console.log('onmousedown')
    //由于onmousedown每次都會(huì)調(diào)用的，在這里初始化一下這個(gè)變量
    isDrag = false
    //延遲100ms
    timer = setTimeout(setDragTrue, 200)
  }

  function setDragTrue () {
    isDrag = true
  }

  function move () {
    //能夠使用isDrag來推斷是移動(dòng)還是拖動(dòng)
  }

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

</script>