jQuery Detect continual mousedown

Question

Is there a way to detect continual mousedown? In other words, I want a function to continue to run while the left mouse button is being pressed. Here is an example of what im trying to do. I have a button that controls the scrollLeft position. It increments by 20 on every click, but I want it to continue incrementation while the mouse button is left pressed and stop onmouseup.

Similar to how the arrows on a scroll bar work when you leave the mouse button pressed

    var wrapperDiv = $("#wrapper-div");
    var scrollWidth = 0;

    $("#right-button").click(function() {
      if(scrollWidth < wrapperDiv[0].scrollWidth) {
        scrollWidth = scrollWidth+20;
        wrapperDiv.scrollLeft(scrollWidth);
      }

});

if you having a problem in left, right and center mouse click detection have a look this [thread](http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery). — Muhammad Saifuddin, Nov 21 '11 at 18:12

Matt Ball · Accepted Answer · 2011-11-21T18:20:16.270

6

Don't use a click handler. Use two separate handlers, one for mousedown and one for mouseup.

var $wrapper = $('#wrapper');

function startScrolling()
{
    // contintually increase scroll position
    $wrapper.animate({scrollLeft: '+=20'}, startScrolling);
}

function stopScrolling()
{
    // stop increasing scroll position
    $wrapper.stop();
}

$('#right-button').mousedown(startScrolling).mouseup(stopScrolling);

Demo: http://jsfiddle.net/mattball/dkWGy/

edited Nov 21 '11 at 18:20

answered Nov 21 '11 at 18:09

Matt Ball

354,903
100
647
710

This works only on the first click, but does not continue to increment. I need it to continue incrementation while the button is left pressed down. Similar to how the arrows on a scroll bar work when you leave the mouse button pressed – user1058223 Nov 21 '11 at 18:18
Sorry for the sloppiness - I fixed all the brokenness and added a working demo. – Matt Ball Nov 21 '11 at 18:21

score 0 · Answer 2 · edited Apr 15 '15 at 17:30

This is the same, but expanded into a player UI.
I found I needed to add the mouseleave to avoid non-detections.

var $wrapper = $('#main');

$('.pageBackOpt32').mousedown(scrollSlowL).mouseup(stopScroll).mouseleave(stopScroll);
$('.pageNextOpt32').mousedown(scrollSlowR).mouseup(stopScroll).mouseleave(stopScroll);
$('.pageRwOpt32').mousedown(scrollFastL).mouseup(stopScroll).mouseleave(stopScroll);        $('.pageFfOpt32').mousedown(scrollFastR).mouseup(stopScroll).mouseleave(stopScroll);

function scrollSlowL() { 
  $wrapper.animate({ scrollLeft: '-=50' }, scrollSlowL); 
}

function scrollSlowR() { 
  $wrapper.animate({ scrollLeft: '+=50' }, scrollSlowR); 
}

function scrollFastL() { 
  $wrapper.animate({ scrollLeft: '-=250' }, scrollFastL); 
}

function scrollFastR() { 
  $wrapper.animate({ scrollLeft: '+=250' }, scrollFastR); 
}

function stopScroll() {
  $wrapper.stop();
}

score 0 · Answer 3 · answered Nov 21 '11 at 18:09

0

How about using mouseup and mousedown?

answered Nov 21 '11 at 18:09

Stein G. Strindhaug

5,077
2
28
41

score 0 · Answer 4 · answered Nov 21 '11 at 18:09

0

you should use a param for the event mousedown and mouseup

while mouse down is true you can do setInterval in JS and todo your things.

and when the mouseup is true you can assume that he no longer click the mouse

answered Nov 21 '11 at 18:09

Royi Namir

144,742
138
468
792

do you have an example of how this would look? I'd greatly appreciate it :) – user1058223 Nov 21 '11 at 18:21

jQuery Detect continual mousedown

4 Answers4

Demo: http://jsfiddle.net/mattball/dkWGy/