jQuery Scrolling box cancel interval on mouseup help

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 funtions 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 canceld, 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 doesnt work either. I want to kill the "interval" interval when ever the mouseup is triggered.

Any suggestions?

Answer 1

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.

Answer 2

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.