鼠标事件与触摸事件

发表于

一、鼠标事件

  • mousedown：鼠标按钮被按下时触发。不能通过键盘触发。
  • mouseup：鼠标按钮被释放弹起时触发。不能通过键盘触发。
  • click：单击鼠标左键或者按下回车键时触发。
  • dblclick：双击鼠标左键时触发。


  • mouseover：鼠标移入目标元素或后代元素上时会触发。
  • mouseout：鼠标离开目标元素或后代元素时会触发 。
  • mouseenter：鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
  • mouseleave：鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
  • mousemove：当鼠标移入被选元素内后，任意移动一个像素点都会触发 。

注：

  • 在一个元素上相继触发mousedown和mouseup事件，才会触发click事件。两次click事件相继触发才会触发dblclick事件。

    1
    mousedown ->  mouseup -> click ->mousedown ->  mouseup -> click -> dblclick

  • 如果取消 了mousedown或mouseup中的一个，click事件就不会被触发。直接或间接取消了click事件，dblclick事件就不会被触发了。


二、触摸事件

  • touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
  • touchmove：当手指在屏幕上滑动时连续地触发。调用preventDefault()可以阻止滚动。
  • touchend：当手指在屏幕上移开时触发。
  • touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

注：

  • 点一下的触发顺序

    1
    touchstart -> touchend -> mouseover-> mousedown ->  mouseup -> click

  • 移动端的click事件会延迟300ms左右触发事件回调。等待 300 毫秒，以判断用户是否再次点击了屏幕