如何在JavaScript中区分单击和鼠标向下事件？
我有一个画布，我想在用户点击时画点，在点击和拖动时画一条线如何在JavaScript中区分单击和鼠标向下事件？,javascript,html,canvas,Javascript,Html,Canvas,我有一个画布，我想在用户点击时画点，在点击和拖动时画一条线 为了确定当鼠标在画布上移动时是否应该生成一条线，我设置了一个变量“isDrawing”，告诉用户在画布上移动之前是否单击过画布。我将“mousedown”事件绑定到画布，并在触发事件时将“isDrawing”设置为true。如果这是真的，我将开始画一条线，否则我不会对这种行为做任何事情。但问题是，当用户单击绘制点时，“isDrawing”也设置为true，因为“mousedown”事件是由单击触发的。我的问题是如何区分click和mou
为了确定当鼠标在画布上移动时是否应该生成一条线，我设置了一个变量“isDrawing”，告诉用户在画布上移动之前是否单击过画布。我将“mousedown”事件绑定到画布，并在触发事件时将“isDrawing”设置为true。如果这是真的，我将开始画一条线，否则我不会对这种行为做任何事情。但问题是，当用户单击绘制点时，“isDrawing”也设置为true，因为“mousedown”事件是由单击触发的。我的问题是如何区分click和mousedown事件，这样当用户刚刚单击某个地方时，“mousedown”事件就不会被触发？谢谢。@Aaron有了一个好主意……在鼠标上添加点，而不是鼠标下 在mouseup中，如果鼠标被拖动的总像素数小于5，则将mouseup视为单击而不是拖动。（以5像素为例——根据所需公差进行调整） 在mousemove中，延迟绘制线，直到鼠标被拖动至少5个像素 下面是示例代码和演示：
正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
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=假；
var lastX，lastY；
var dragHash；
功能手柄向下（e）{
e、 预防默认值（）；
e、 停止传播（）；
lastX=parseInt（e.clientX-offsetX）；
lastY=parseInt（例如clientY-offsetY）；
//把你的鼠标下的东西放在这里
dragHash=0；
isDown=真；
}
功能handleMouseUp（e）{
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
如果（dragHash4）{
//这是一个拖动操作，画线
}
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUp（e）；}）；
}); // end$（函数（）{}）；
函数e（id）{returndocument.getElementById（id）；}
var box=e（'box'），
ctx=box.getContext（'2d'），
w=方框宽度，
h=盒子高度，
mx=0，
my=0
;
ctx.fillStyle='#333'；
ctx.fillRect（0,0，w，h）；
ctx.fillStyle='#FF0000'；
ctx.strokeStyle='#FF0000'；
box.addEventListener（'mousedown'，函数（e）{
mx=e.pageX-box.offsetLeft，
my=e.pageY-box.offsetTop；
}，假）；
//减少密度。
功能d（i，c）{
返回（c-10i）；
}
框.addEventListener（'mouseup'，函数（e）{
var nx=e.pageX-box.offsetLeft，
ny=e.pageY-box.offsetTop；
ctx.beginPath（）；
if（d（mx，nx）和d（my，ny））{
弧（mx，my，1，0，Math.PI*2，false）；
}否则{
ctx.moveTo（mx，my）；
ctx.lineTo（纽约州新州）；
}
ctx.closePath（）；
ctx.stroke（）；
mx=nx，my=ny；
}，假）；
<!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>
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);