鼠标移动事件如果发生鼠标停止

时间:2015-05-19 06:43:31

标签: javascript jquery canvas html5-canvas

当鼠标停止事件发生时以及鼠标启动事件我不想使用鼠标移动事件时如何使用鼠标移动事件?我想用这种方式在画布上画线。 请帮我?

3 个答案:

答案 0 :(得分:1)

触发.mousemove()事件后,绑定.mouseup().mouseup()事件。在.mouseup()事件中取消绑定.mousemove().mousemove()事件。这样.mousedown()只会在#mouse-down-container { height:300px; width:300px; background-color:#333; color:#fff; } 被触发时发生。

您可以尝试以下示例:

CSS

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

</div>

HTML

$("#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");
    });
});

的Javascript

mFavLsv.setAdapter(mYtadapter );

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

以下是在画布上绘制线条的示例: http://jsfiddle.net/hzNg4/7/

答案 1 :(得分:0)

这是一个可以帮助您的脚本:

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/

答案 2 :(得分:0)

您可以创建一个全局变量drawing,在鼠标按下时变为true,在鼠标按下时变为false。然后,在鼠标移动时,只绘制drawing == true