Question

我有一个画布，我想在用户点击时画点，并在点击和拖动时画一条线。

为了确定当鼠标在画布上移动时是否应该生成一条线，我设置一个变量'isDrawing'来判断用户是否在移动它之前点击了画布。我将'mousedown'事件绑定到画布，并在触发事件时将'isDrawing'设置为true。如果确实如此，我将开始绘制一条线，否则我将对此行为不采取任何措施。但问题是当用户点击绘制点时，'isDrawing'也设置为true，因为点击触发'mousedown'事件。我的问题是如何区分click和mousedown事件，以便当用户只是点击某个地方时，'mousedown'事件将不会被触发？感谢。

Answer 1

@Aaron有一个好主意的开始......在mouseup中添加你的点而不是mousedown。

在mouseup中，如果鼠标拖动的总像素小于5，则将鼠标视为单击而不是拖动。（5像素就是一个例子 - 根据你想要的公差进行调整）。

在mousemove中，延迟绘制直线，直到拖动鼠标至少5个像素。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/ZTuKP/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var isDown=false;
    var lastX,lastY;
    var dragHash;

    function handleMouseDown(e){
      e.preventDefault();
      e.stopPropagation();

      lastX=parseInt(e.clientX-offsetX);
      lastY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      dragHash=0;
      isDown=true;
    }

    function handleMouseUp(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      if(dragHash<5){
          alert("It's a click...add a dot");
      }else{
          alert("You've been dragging");
      }

      // Put your mouseup stuff here
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var dx=mouseX-lastX;
      var dy=mouseY-lastY;
      lastX=mouseX;
      lastY=mouseY;

      // accumulate the drag distance 
      // (used in mouseup to see if this is a drag or click)
      dragHash+=Math.abs(dx)+Math.abs(dy);

      if(dragHash>4){
          // it's a drag operation, draw the line
      }

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});



}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

以下是使用纯javascript小巧紧凑的示例：http://jsfiddle.net/kychan/2t97S/

function e(id) { return document.getElementById(id); }

var box = e('box'),
    ctx = box.getContext('2d'),
    w   = box.width,
    h   = box.height,
    mx  = 0,
    my  = 0
;

ctx.fillStyle = '#333';
ctx.fillRect(0,0,w,h);
ctx.fillStyle = '#FF0000';
ctx.strokeStyle= '#FF0000';

box.addEventListener('mousedown', function(e) {
    mx = e.pageX - box.offsetLeft,
    my = e.pageY - box.offsetTop;
}, false);

//    reduces dender.
function d(i,c) {
    return (c-10<i && c+10>i);
}
box.addEventListener('mouseup', function(e) {
    var nx = e.pageX - box.offsetLeft,
        ny = e.pageY - box.offsetTop;

    ctx.beginPath();
    if (d(mx,nx) && d(my,ny)) {
        ctx.arc(mx,my,1, 0, Math.PI*2, false);
    }else{
        ctx.moveTo(mx, my);
        ctx.lineTo(nx, ny);
    }
        ctx.closePath();
    ctx.stroke();
    mx=nx, my=ny;
}, false);

如何区分JavaScript中的click和mousedown事件？

2 个答案: