javascript - jquery鼠标点击事件

Question

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

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

但即使鼠标位于 Canvas 元素上(无论是否单击左按钮)，它也会触发function(e)。

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

Answer 1

实现此目的的一种方法是创建一个全局变量并在用户单击元素时修改其值，如下所示:

var mouseIsDown = false;

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

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

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”绑定(bind)到重置 mouseIsDown 的函数，或者全局绑定(bind)“mouseup”:

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

或者

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

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