jQuery Scrolling box cancel interval on mouseup

Question

Sorry that I don't have an example.

However I'm creating a scrolling box (scrolls left and right) I have bind mouseDown functions to 2 images (these are used to scroll the box). the functions are "scrollLeft()" and "scrollRight()".

These functions work as planned (moving the box left and right). However I have a problem with the mouseUp event. When I keep my mouse over the images and mouseup the scroll event gets cancelled, meaning the scrolling stops.

However, if I move my mouse off the image and mouseup the scroller keeps doing it's function.

I'm using jquery and have tried all sorts of things including

$("*").mouseup(function(){
    console.log("ouseup");
    clearInterval(interval);
});

This doesn't work either. I want to kill the "interval" interval when ever the mouseup is triggered.

Any suggestions?

I think this also exists in jquery mouseup docs. http://docs.jquery.com/Events/mouseup Click the text, hold the mouse, move the mouse away from the text, and mouseup. The mouseup function doesn't get executed. — dotty, Sep 23 '09 at 08:42

Phil.Wheeler · Accepted Answer · 2009-09-23T09:07:32.700

Sounds like you might be best using the mouseout() event. Bind it to your images as well so that it fires when your mouse leaves them.

EDIT: Ok, you want to ensure that whenever your mouse leaves those images then your mouseup event fires. So you want to take advantage of the triggerHandler() function.

$('#myImage').mouseout(function(){
  $('#myImage').triggerHandler('mouseup');
});

Alternatively (as suggested already), binding the mouseup event to the entire body could also be an option:

$('body').mouseup(function(){
  ClearInterval();
});

The reason your mouseup event isn't firing when you move the mouse away from your image before letting go of the button is that your mouse button is firing the 'up' event for another element. Remember, the mouseup event is triggered for whichever element your mouse happens to be positioned over at that time. So of course, if you depress the mouse button in one place, then move it away from the region expecting the mouseup event, that region will never be aware that you've lifted the mouse button again.

I need it so that once the mouseup event is trigger. So it works like a standard scrollbar. — dotty, Sep 23 '09 at 08:45

score 0 · Answer 2 · answered Sep 23 '09 at 08:51

You could attach a handler to the document mouseup event, i.e.

$(document.body).mouseup(function() {
    console.log("ouseup");
    clearInterval(interval);
});

This way if you leave the area with a clicked mouse button, it will continue to scroll until you release it.

jQuery Scrolling box cancel interval on mouseup

2 Answers2