jQuery Forum

Thanks for the research and the pull request but I closed the ticket as invalid (as designed). The selectable distance option has a default value of 0 which is designed to capture the mouse for selection on mousedown, preventing clicks. If you want to allow clicks, set distance to a value greater than 0.

http://bugs.jqueryui.com/ticket/4219

http://docs.jquery.com/UI/Selectable#option-distance

In my case, set up the distance solved the problem of click event to trigger the Color Animation effect, but immediately I encountered another issue the background color stopped shows up after the selectable element was clicked. 

If there is currently inconsistent behavior there may be a bug, but we need to be clear about whether the bug is that a click doesn't happen in some cases where it should or whether the bug is that a click does happen in some cases where it shouldn't. I closed ticket #4219 because it stated that with the default, distance 0, there's a bug of a click not occurring. That's not a bug because with distance 0 a click should not occur. As designed. If you feel strongly about the inconsistency of click sometimes occurring, when it shouldn't, in some browsers, with distance 0, feel free to file a bug about it. But it will have to be the inverse of #4219. (the alternative, reopen #4219 and change the title and description, would add quite a bit of confusion to someone that might happen on it in the future and try to follow all the comments on it as well as this related discussion)

But my understanding is that jQuery and jQuery UI should limit the way we do things as less as possible. So why prevent me from adding a click handler if I want to?

We're not trying to prevent you from adding a click handler, and we aren't. But starting a distance 0 selection means no click will trigger. We're trying to provide a way for either of the events to occur but not both at the same time. Distance 0 means only the selecting events should, because selectable is greedy on mousedown with distance 0. Distance greater than 0 means selectable doesn't get involved until after at least one mousemove, meaning it doesn't get in the way of click or dblclick.

I'll tell you my use case to get you a better understanding.
Imagine a file manager. You can select files and do stuff with them. But you can also just dblclick one file to do stuff with it ("execute" it). Setting a distance of greater than 0 just doesn't feel right. The user expects a certain behavior.

That's a fine example to discuss. The question is not whether a click should be allowed. The question is whether at the point of a click or dblclick there should also have occurred a selectstart and a selectstop. Our opinion is no, they shouldn't both happen. Either you're clicking/double-clicking or you're starting a selection. If you're clicking you're not clicking and starting and stopping a selection in place. Same thing with double click.

You could argue as to whether or not distance should have a default value of 0 or 1. There reason it has a default value of 0 is that the more common case than selectable+some-other-non-selecting-click is selectable alone. In the case of selectable alone the user should see the selection start on mousedown. They should even be able to mousedown to start the selection and mouseup in the same exact spot with 0 mousemove to stop the selection. But in this case a click should not fire. Imagine, if this weren't possible, if distance defaulted to 1, every typical user of the selectable plugin would have to bind a click handler to handle selection on click in one place. Or change the distance to 0. So you've got users on both sides that would benefit from either default value.

In short: By default selectable takes over click (technically mousedown+mouseup in same spot) so that both drag and click mean selecting. If you want drag (mousedown+mousemove+mouseup) to mean selecting but click (mousedown+mouseup in same spot) to mean something else you have to prevent selectable from getting involved before a mousemove. And that's done by setting a non-0 distance.

If that works for you it looks ok.

This is the fundamental choice the distance option forces you to make. Do you want the selection to start on mousedown with no mousemove, which prevents a click in place (we don't want both a click and a select to occur) OR do you want (non-selecting) in-place click to be possible but at the cost of the user needing to move the mouse at least 1px after mousedown to start a selection.

Thank you so much! It was a real headache!