jquery 鼠标点击事件答案

【问题标题】：jquery mouseclick eventjquery 鼠标点击事件
【发布时间】：2012-10-29 21:40:49
【问题描述】：

我对 jquery 很陌生，正在寻找处理鼠标按下事件的事件。现在我已经找到并使用了类似的东西：

 $("#canva").live('mousedown mousemove mouseup', function(e){ ....

但即使鼠标悬停在画布元素上（无论是否单击左键），它也会触发 function(e)。

我期待在#canva 元素上方的每次坐标更改以及单击我的鼠标按钮时触发的事件。释放鼠标左键应导致此事件结束。

【问题讨论】：

标签： javascript jquery canvas

【解决方案1】：

一种方法是创建一个全局变量并在用户单击元素时修改其值：

var mouseIsDown = false;

$('#mycanvas').on('mousedown', function () {mouseIsDown = true});
$('#mycanvas').on('mouseup', function () {mouseIsDown = false});

现在您所要做的就是将“mousemove”绑定到您要触发的函数，并简单地在函数主体中附加一个条件，以检查左键单击的状态并在必要时进行转义。

function fireThis(e) {
// if the user doesn't have the mouse down, then do nothing
if (mouseIsDown === false)
     return;

// if the user does have the mouse down, do the following
// enter code here
// ....
// ....
}

// bind mousemove to function
$('#mycanvas').on('mousemove', fireThis);

现在，如果用户在元素内部单击，然后在释放之前将鼠标拖到元素外部，您会注意到“mouseup”永远不会被触发，并且变量 mouseIsDown 永远不会变回 false。为了解决这个问题，您可以将“mouseout”绑定到重置 mouseIsDown 的函数或全局绑定“mouseup”：

$('#mycanvas').on('mouseout', function () {mouseIsDown = false});

或

$(document).on('mouseup', function () {mouseIsDown = false});

这是一个例子：http://jsfiddle.net/pikappa/HVTWb/

【讨论】：