javascript - js中如何区分鼠标的点击事件和滑动事件?
本文介绍了javascript - js中如何区分鼠标的点击事件和滑动事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
各位大神, 我是想用网页做一个画板,有像photoshop类似的图层效果,可以改变图层之间的覆盖关系。构建图层的函数已经封装好了。但是我现在想区分如果鼠标只是点击click时,不增加图层。但是在用画笔划线滑动时,构建图层。如果把事件绑定在onmouseover上,就会一移动鼠标就构建。绑在onmouseup上点击时也会加图层。大神们有什么解决办法吗?
解决方案
点下鼠标后,记录此时鼠标的clientX和clientY,
放开鼠标后,看clientX和clientY与原先是否相同,即可。
如果想要移动一小点也算点击,则设个范围比较
var Mouse = {
x: 0,
y: 0,
mousedown: function (event) {
Mouse.y = event.clientY;
Mouse.x = event.clientX;
},
mouseup: function (event) {
if (event.clientX != Mouse.x || event.clientY != Mouse.y) {
console.log('slide');
} else {
console.log('click');
}
}
}
document.body.onmousedown = Mouse.mousedown;
document.body.onmouseup = Mouse.mouseup;
这篇关于javascript - js中如何区分鼠标的点击事件和滑动事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文