jquery ui slider: call function on mouseup outside

问题

i use the jquery ui slider and all is fine except that the function i defined in the change parameter fired only when i release the mouse over the handles. Is there a way to call the function when the mouse is released outside the slider?

thanks for helping.

回答1:

$("#slider").slider({
    start: function(event, ui) {
        // do something on mousedown on slider
    },
    stop: function(event, ui) {
        // do something on mouseup anywhere
    }
});

回答2:

I think you have used like this.... Nature of change event is that when you mouse up than it will show changes in slider event...

$( ".selector" ).slider({
   **change**: function(event, ui) { ... }
});

Now you can use this type slide event......so every time you will move slider than It will show effect and calling this function.

$( ".selector" ).slider({
   **slide**: function(event, ui) { ... }
});

Dhaval mistry...(UI developer)

回答3:

You can use change. It will works as a callback. Based on http://api.jqueryui.com/slider/ You can:

$('.selector').slider(function() {
    change: function( event, ui ) {}
});

回答4:

There would seem to be something wrong here, the change event is based on the slider position moving and therefore if you can see the pin being dragged whilst the mouse is down then the event should still fire irrespective of where your mouse ends up.

Is this the standard jquery slider you are using? If so, try the same test on the official demo page:

jQuery UI demo page

You will see that no matter where your mouse is the change event still fires so long as you continue to hold the mouse button down after initially clicking the pin.

回答5:

I also faced same issue. For me, its happening when slider is part of child div and rest of screen is covered by a parent div. Consider following scenario:

1. Press mouse button when mouse pointer is on the slider bar,

2. drag it for a while and bring mouse pointer out of child div.

3. Now the mouse pointer is on parent div.

4. Release mouse button.

5. Observe slider bar is still highlighted.

6. Bring mouse pointer back to child div without pressing button.

7. Observe the movement in slider bar.

回答6:

Yes I'm using default jquery slider. Brian please look at

http://api.jqueryui.com/slider/#entry-examples

At the bottom of page with the example slider you'll see the same issue I was talking about.

回答7:

This problem is related to http://bugs.jqueryui.com/ticket/8912

I tried the following hack and it worked:

use the jQuery hover function to attach a mouse out handler on the element that contains the slider. If the mouseout occurs during sliding, trigger a mouseup to the slider handle element.

来源：https://stackoverflow.com/questions/3967435/jquery-ui-slider-call-function-on-mouseup-outside