javascript - js中如何区分鼠标的点击事件和滑动事件?
ringa_lee
ringa_lee 2017-04-11 12:36:51
0
4
893

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

ringa_lee
ringa_lee

ringa_lee

reply all (4)
迷茫

点下鼠标后,记录此时鼠标的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;
    大家讲道理

    按下鼠标 再移动?

      巴扎黑

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

        巴扎黑
        var drawing=false; function onMouseDown(){ drawing = true; } function onMouseOver(){ if(drawing) { // ... } } function onMouseUp(){ drawing =false; }
          Latest Downloads
          More>
          Web Effects
          Website Source Code
          Website Materials
          Front End Template
          About us Disclaimer Sitemap
          php.cn:Public welfare online PHP training,Help PHP learners grow quickly!