CODEWITHSUNDEEP
javascriptjquerycanvashtml5-canvas
FardadA
FardadA

Reputation: 21

Mouse move event if mouse down happened

How I can use mouse move event when mouse down event happened and when mouse up event I don't want to use mouse move event? I want draw line on canvas in this way. Please help me?

Upvotes: 0

Views: 2023

Answers (3)

Rodrigo
Rodrigo

Reputation: 5119

You may create a global variable drawing that becomes true on mouse down and becomes false on mouse up. Then, on mouse move, only draw if drawing == true.

Upvotes: 0

Jako Basson
Jako Basson

Reputation: 1531

Once the .mousedown() event is triggered, bind both the .mousemove() and .mouseup() events. In the .mouseup() event unbind both the .mouseup() and .mousemove() events. This way the .mousemove() will only ever happen when the .mousedown() is triggered.

You can try the following example:

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/

Here's an example of drawing a line on a canvas: http://jsfiddle.net/hzNg4/7/

Upvotes: 2

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

Here's a script that may help you:

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

Demo: http://jsfiddle.net/v4btgen2/

Upvotes: 0

Related Questions