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

Question

我有一個畫布，我想在用戶單擊時繪制點，在單擊並拖動時繪制一條線。

為了確定當鼠標在畫布上移動時是否應生成一條線，我設置了一個變量“ isDrawing”來告訴用戶在畫布上移動之前是否單擊了畫布。 我將“ mousedown”事件綁定到畫布，並在觸發事件時將“ isDrawing”設置為true。 如果是真的，我將開始畫一條線，否則我將對此行為不做任何事情。 但是問題在於當用戶單擊以繪制點時，“ isDrawing”也設置為true，因為“ mousedown”事件是由單擊觸發的。 我的問題是如何區分click和mousedown事件，以便在用戶僅單擊某處時不會觸發“ mousedown”事件？ 謝謝。

Answer 1

@Aaron是一個好主意的開始...在mouseup而不是mousedown中添加點。

在mouseup中，如果拖動的鼠標少於5個總像素，則將mouseup視為單擊而不是拖動。 （以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 個解決方案

解決方案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