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

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

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

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

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

// 定义标志符
let isMouseEvent = false

// 定义一个变量用来存放click事件和mousedown、mouseup事件发生的目标元素对象
let targetElement = null

// 监听mousedown事件
window.addEventListener(\'mousedown\', (e) => {
	if(e.target[attr] === targetElementAttr){ // 根据mousedown事件中target对象的属性来筛选目标元素对象
		targetElement = e.target
		isMouseEvent = false
		// 进行其他操作
	}
})

// 监听mousemove事件
window.addEventListener(\'mousemove\', (e) => {
	// 仅对目标元素进行操作
	if(targetElement){
		isMouseEvent = true
		// 进行其他操作
	}
})

// 监听mouseup事件
window.addEventListener(\'mouseup\', (e) => {
	if(isMouseEvent){
		// isMouseEvent为true表示为拖拽操作，并将标志符
		// 进行鼠标释放操作
	} else {
		// isMouseEvent为false表示没有进行拖拽操作，即可将其视为点击操作
		// 调用点击事件
		handleClickEvent()
	}
})

// 设置点击事件
function handleClickEvent() {
	// 将目标元素清空，防止点击事件执行完后，移动鼠标时触发mousemove事件
	targetElement = null
}

总结：

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

参考文献：

[1] 区分click事件和mousedown（mouseup、mousemove）方法
[2] mousedown\\mouseup\\click事件关系