Reputation: 147

jQuery Detect continual mousedown

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);
      }

});

Upvotes: 2

Answers (4)

John Avant

Reputation: 1

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

Upvotes: 0

Matt Ball

Reputation: 359966

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);