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

Question

I have a canvas, I want to draw dots when user clicked and draw a line when clicked and dragged. 我有一个画布，我想在用户单击时绘制点，在单击并拖动时绘制一条线。

In order to identify whether I should generate a line when mouse is moving on the canvas, I set a variable 'isDrawing' to tell if the user has clicked on the canvas before moving on it. 为了确定当鼠标在画布上移动时是否应生成一条线，我设置了一个变量“ isDrawing”来告诉用户在画布上移动之前是否单击了画布。 I bind 'mousedown' event to the canvas and set 'isDrawing' to true when the event is triggered. 我将“ mousedown”事件绑定到画布，并在触发事件时将“ isDrawing”设置为true。 If it is true I will start drawing a line, otherwise I will do nothing to this behavior. 如果是真的，我将开始画一条线，否则我将对此行为不做任何事情。 But the problem is when user clicked to draw dots, the 'isDrawing' is also set to true because the 'mousedown' event is triggered by the click. 但是问题在于当用户单击以绘制点时，“ isDrawing”也设置为true，因为“ mousedown”事件是由单击触发的。 My question is how to differentiate the click and mousedown event so that when user just clicked somewhere the 'mousedown' event will not be triggered? 我的问题是如何区分click和mousedown事件，以便在用户仅单击某处时不会触发“ mousedown”事件？ thanks. 谢谢。

Answer 1

@Aaron has the start of a good idea...Add your dot in mouseup instead of mousedown. @Aaron是一个好主意的开始...在mouseup而不是mousedown中添加点。

In mouseup if the mouse has been dragged less than 5 total pixels then treat the mouseup as a click rather than a drag. 在mouseup中，如果拖动的鼠标少于5个总像素，则将mouseup视为单击而不是拖动。 (5 pixels is an example--adjust for your desired tolerances). （以5像素为例-调整所需的公差）。

In mousemove, delay drawing your line until the mouse has been dragged at least 5 pixels. 在mousemove中，延迟绘制线条，直到鼠标被拖动至少5个像素为止。

Here's example code and a Demo: http://jsfiddle.net/m1erickson/ZTuKP/ 这是示例代码和演示： 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

Here's an example using pure javascript small and compact: http://jsfiddle.net/kychan/2t97S/ 这是一个使用小巧精巧的纯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 个解决方案

解决方案1
3 2014-05-04 20:38:24

解决方案2
1 已采纳 2014-05-04 21:06:32

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

问题描述

2 个解决方案

解决方案1 3 2014-05-04 20:38:24

解决方案2 1 已采纳 2014-05-04 21:06:32

解决方案1
3 2014-05-04 20:38:24

解决方案2
1 已采纳 2014-05-04 21:06:32