mousedown、mouseup、click

1、触发时机

mouseddown：鼠标移动到元素上方，并按下鼠标时触发，不区分左右键。
mouseup：在元素上松开鼠标时触发，不区分左右键。
click：鼠标停留在元素上方，按下鼠标左键，并且松开鼠标左键时触发，区分左右键。

2、触发顺序

左键：在同一个元素上按下、并松开，会依次触发mousedown、mouseup、click，前一个事件执行完才会执行下一个事件。
右键：在同一个元素上按下、并松开，会依次触发mousedown、mouseup，前一个事件执行完才会执行下一个事件。

3、场景

一般是用mousedown+mousemove配合做拖拽等，用click做点击，但是如果这两个事件同时存在的时候，执行click的时候会有干扰，因此建议用mousedown+mousemove+mouseup配合，在mouseup中判断是拖拽还是点击，不需要注册click。

// 如果鼠标移动，则是拖拽事件，如果鼠标不移动，则是点击事件
var isMove;
div.addEventListener('mousedown', (e) => {
    isMove = false;
})
div.addEventListener('mousemove', (e) => {
    isMove = true;
})
div.addEventListener('mouseup', (e) => {
    if (!isMove) {
       // 鼠标不移动，则为点击
       // .......
    }
})

mousedown、mouseup、click

悦读