Search code examples
javascriptjquerymouseeventmousemovemousedown

how to implement mousemove while mouseDown pressed js


I have to implement mouse move event only when mouse down is pressed.

I need to execute "OK Moved" only when mouse down and mouse move.

I used this code

 $(".floor").mousedown(function() {
  $(".floor").bind('mouseover',function(){
      alert("OK Moved!");
  });
})
.mouseup(function() {
 $(".floor").unbind('mouseover');
});

Solution

  • Use the mousemove event.

    From mousemove and mouseover jquery docs:

    The mousemove event is sent to an element when the mouse pointer moves inside the element.

    The mouseover event is sent to an element when the mouse pointer enters the element.

    Example: (check console output)

    $(".floor").mousedown(function () {
        $(this).mousemove(function () {
            console.log("OK Moved!");
        });
    }).mouseup(function () {
        $(this).unbind('mousemove');
    }).mouseout(function () {
        $(this).unbind('mousemove');
    });
    

    https://jsfiddle.net/n4820hsh/