javascript - jquery 鼠标点击事件

Question

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

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

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

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

Answer 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/