发生鼠标按下时的鼠标移动事件

Question

发生鼠标按下事件时如何使用鼠标移动事件，而当鼠标松开事件发生时我不想使用鼠标移动事件？我想以这种方式在 canvas 上画线。请帮我？

Answer 1

这是一个可能对您有帮助的脚本：

var _mouseDown = false;
$(".el").mousedown(function() {
    _mouseDown = true;
});
$(".el").mousemove(function() {
    if ( _mouseDown ) {
        console.log("move me");
    } 
});
$(".el").mouseup(function() {
    _mouseDown = false;
});

演示：http://jsfiddle.net/v4btgen2/

Answer 2

触发.mousedown()事件后，绑定.mousemove()和.mouseup()事件。在 .mouseup() 事件中取消绑定 .mouseup() 和 .mousemove() 事件。这样 .mousemove() 只会在 .mousedown() 被触发时发生。

您可以试试下面的例子：

CSS

#mouse-down-container {
    height:300px;
    width:300px;
    background-color:#333;
    color:#fff;
}

HTML

<div id="mouse-down-container"> <span id="mouse-text">mouse is not down or moving</span>

</div>

Javascript

$("#mouse-down-container").mousedown(function () {
    var $this = $(this);
    $("#mouse-text").html("mouse is down");

    $this.mousemove(function () {
         $("#mouse-text").html("mouse is moving");
    });

    $(document).mouseup(function () {
        $("#mouse-text").html("mouse is not down or moving");
        $(document).unbind("mouseup");
        $this.unbind("mousemove");
    });
});

http://jsfiddle.net/csc6e22x/2/

下面是在 canvas 上画一条线的例子： http://jsfiddle.net/hzNg4/7/

Answer 3

您可以创建一个全局变量 drawing，在鼠标按下时变为 true，在鼠标松开时变为 false。然后，在鼠标移动时，仅在 drawing == true.

时绘制

发生鼠标按下时的鼠标移动事件

Mouse move event if mouse down happened

javascript

jquery

canvas

html5-canvas