Losing MouseUp event if releasing not over the same element

Question

I have got a problem with a slider. When i grab the handler, i change the .src of the image, just to change its color. However, i want it to change back to the original color when i release the mouse button. I have tried two things.

1) Changing it back on the handler mouseup event: this works only if i release the button over the handler, so this is not a solution.

2)Changin it back on the window mouseup event: the event is not firing properly. If i click and release on any place of the window, the event fires normaly, but if i click in the handler, move the cursor to any other point of the window, and then release the button, the event will not fire.

Btw, im using the prototype js framework.

Solutions? Thanks

Here is the code. I load the handler function when the document is ready.

function handler()
{

    var handler = $('handler');

    Event.observe(window, "mouseup", function(){
        alert('salta');   //to see when mouseup fires
        if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){    //orange
            handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';}    //grey
    });


    Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';});    //orange

}

you're attaching a `mouseup` handler to `window`, not `document`. they are not the same. — lincolnk, Sep 30 '10 at 17:37

score 9 · Accepted Answer · answered Sep 30 '10 at 14:42

9

You should be attaching the mouseup handler to the document object.

answered Sep 30 '10 at 14:42

lincolnk

11,218
4
40
61

im sorry, can you explain yourself a little more? – Alberto Mnemon Sep 30 '10 at 15:03
your function which sets the slider back to the original color should be called when `document` detects `mouseup`, not when your slider element does. attaching to `document` will call the event handler if you release the mouse anywhere in the web page, not just over your slider. post your non-working code if you want more specific help fixing it. – lincolnk Sep 30 '10 at 15:10
That seems exactly what i am doing, maybe you didnt understand me because of my english. I'll post the code to make things clear for all of us. – Alberto Mnemon Sep 30 '10 at 15:23
yes, that worked! As u said, i was attaching it to the window, not to the document. Thanks lincolnk, and sorry about the code! – Alberto Mnemon Oct 01 '10 at 08:02
This works, but I'd rather not capture every mouseup, because I'm performing an expensive operation when I capture mouseup for the sliders. Any other solutions? – semperos Aug 03 '11 at 19:30
@semperos add a check before you do the expensive stuff? if it's more complicated than that you should ask a new question. – lincolnk Aug 03 '11 at 20:07
@lincolnk As I'm using jQuery UI sliders, I just ended up using the more general 'slidestop' event. Thanks for the comment. – semperos Aug 03 '11 at 21:12
Maybe install the `mouseup` handler to `document` on your slider's `mousedown`, and uninstall it on mouse up? Then it'll only get called when you're really interested in it. – Don Hatch Dec 10 '16 at 11:42

score 2 · Answer 2 · answered Sep 30 '10 at 14:38

2

How about onmouseout event?

answered Sep 30 '10 at 14:38

amorfis

15,390
15
77
125

1

That's not what im looking at. onmouseout will fire if you move the cursor out of a slider. However you are still controlling the slider slider even if you move the cursor to any place on the windowuntil you release the button. And, if you are controlling the slider, the slider is colored, thats what i want. – Alberto Mnemon Sep 30 '10 at 14:47

score 2 · Answer 3 · answered Sep 30 '10 at 15:32

Here is the code. I load the handler function when the document is ready.

function handler()
{

    var handler = $('handler');

    Event.observe(window, "mouseup", function(){
        alert('salta');   //to see when mouseup fires
        if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){    //orange
            handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';}    //grey
    });


    Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';});    //orange

}

this should be edited in to your original post, not added as an answer. I edited your question, this can be deleted. — lincolnk, Sep 30 '10 at 17:34

Losing MouseUp event if releasing not over the same element

3 Answers3

Linked