javascript - js中如何区分鼠标的点击事件和滑动事件？

Question

各位大神， 我是想用网页做一个画板，有像photoshop类似的图层效果，可以改变图层之间的覆盖关系。构建图层的函数已经封装好了。但是我现在想区分如果鼠标只是点击click时，不增加图层。但是在用画笔划线滑动时，构建图层。如果把事件绑定在onmouseover上，就会一移动鼠标就构建。绑在onmouseup上点击时也会加图层。大神们有什么解决办法吗？

Answer 1

点下鼠标后，记录此时鼠标的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;

Answer 2

按下鼠标 再移动？

Answer 3

结合onmousedown呢？- -
画画是按下鼠标然后拖动吧,按下就是onmousedown，此时不触发事件，然后拖动完了松开的时候是onmouseup，此时触发事件？

Answer 4

var drawing=false;
function onMouseDown(){
    drawing = true;
}
function onMouseOver(){
    if(drawing) {
     // ...
    }
}
function onMouseUp(){
   drawing =false;
}