js中如何区分click事件和mousedown、mouseup事件

js中如何区分click事件和mousedown、mouseup事件

最终效果图（查看demo）：

为什么要区分元素的click事件和mousedown、mouseup事件？

在使用js实现元素可拖拽效果时，需要监听鼠标的mouseup、mousedown事件，当拖拽的元素本身需要绑定一个click点击事件时，这种情景下就需要对用户是拖拽操作还是点击操作进行区分。

如何区分click事件和mousedown、mouseup事件？

js中没有提供可以直接进行区分click事件和mousedown、mouseup事件的方法和属性，所以一般是通过一个标志符（一个变量）来进行区分，具体如下：

// 全局标识、用于区分是拖拽事件还是点击事件
let isMove = false

// 获取可拖拽可点击元素的DOM
const targetElement = document.querySelector(target)

// 给可拖拽可点检元素依次添加mousedown、mouseup、click事件监听
targetElement.addEventListener('mousedown', handleMousedown)
targetElement.addEventListener('mouseup', handleMouseup)
targetElement.addEventListener('click', handleClick)

function handleMousedown(e) {
	isMove = false
	window.addEventListener('mousemove', handleMousemove)
	// TODO
}

function handleMousemove(e){
	isMove = true
	// TODO
}

function handleMouseup(e){
	window.removeEventListener('mousemove', handleMousemove)
	// TODO
}

function handleClick(e) {
	if(!isMove){
		// TODO
	}
}

总结：

上述方法区分click事件和mousedown、mouseup事件利用的是如果是拖拽元素，会触发mousemove事件，而单纯的click点击事件是不会触发的，当使用上述方法区分时，就不能也没必要为目标元素添加click点击操作。