Search jQuery

jQuery Forum

Using jQuery UI

valtos

Selectable dosn't fire click event

Not a problem

Need more info
Not a problem
Temporary fix
Analyzing
Working on it
Solved

in Using jQuery UI • 10 years ago

<li>
<p>asdasdasd</p>
<a href="http://www.google.de">asd</a>
</li>

I have the Code above and set the <li>-Tags to selectable with following:

selectable({filter: 'ul.productlist li'})
.bind('selectableselecting', {'object': this}, function(e, ui) {
jQuery.log(e);
jQuery.log(ui);
var t = e.data.object;
var prodid = jQuery(ui.selecting).attr('id');
t.object.trigger('onItemClick', [t.getProductById(prodid)]);
return true;
});

in addition to that i set an onClick-Event to the <a>-Tag inside the selectable-<li>.

If i click on the <a>-Tag, the onClick-Event should be fired and the selectable should be fired.
But actulay only the selectable is fired and the onClick is killed.

If i remove the selectable, the onClick-Event fires normaly.

Any Idea?!

Replies(19)

valtos

Re: Selectable dosn't fire click event

10 years ago

In testing with that problem i have found out that mousedown-Event fired correct.

My Solution in this case was to build a own new Selectable-Class. But i think this is not the right Solution.

So on..

prinzhorn

Re: Selectable dosn't fire click event

9 years ago

I have the same problem.

It sounds weird, but when I scroll down (1px is enough) it works. But the click Event does not fire if the scrollbar is at the very top.

jQuery 1.5.1
jQuery UI 1.8.10
Ubuntu 10.10
Firefox 3.6.15

Hope this helps!

I may try to fix it and commit the fix. But I first have to learn how to contribute.

prinzhorn

Re: Selectable dosn't fire click event

9 years ago

Alright, after about one hour of debugging jquery.ui.selectable.js and jquery.ui.mouse.js I found the solution (well, at least the problem :-D).

The selectable adds a helper div to display the lasso (nothing special and needed). But the helper div is positioned under the mouse, which prevents the click from hitting the underlying element. Even though the helpers width and height are set to 0, this seems to cause the problems.

I'll issue a pull request and I hope it finds it way into the next release.

rdworth

Re: Re: Selectable dosn't fire click event

9 years ago

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

rdworth

Re: Selectable dosn't fire click event

9 years ago

Set the selectable option distance to a value other than 0 (the default):

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

Alan Grid

Re: Re: Selectable dosn't fire click event

4 years ago

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.

prinzhorn

Re: Selectable dosn't fire click event

9 years ago

Thank you for your answer.

I'm not sure if you understood the problem. In some browsers you can't bind a mouseup, click, dblclick, etc. event to an element which is selectable. In others it works or you just have to scroll down like 2px before clicking to get the event! (Works in all browsers! I currently "fixed" it by capturing the scroll event and preventing scrolling to the very top.)
I found that the problem is the initial positioning of the lasso and fixed it to get a consistent behavior. If that's the wrong behavior, then I expect someone to fix it the other way around. Right now it's not consistent.

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?

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.

rdworth

Re: Re: Selectable dosn't fire click event

9 years ago

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.

prinzhorn

Re: Selectable dosn't fire click event

9 years ago

Thanks for you detailed answer.
Now I have a last question. If I really wanted to change the behavior, would this be the correct way (it works, just asking if that's recommended)?

var content = $('#content').selectable();

var _mouseStart = content.data('selectable')['_mouseStart'];

content.data('selectable')['_mouseStart'] = function(e) {
    _mouseStart.call(this, e);
    this.helper.css({
        "top": -1,
        "left": -1
    });
};

rdworth

Re: Re: Selectable dosn't fire click event

9 years ago

If that works for you it looks ok.

nameanew

Re: Selectable dosn't fire click event

9 years ago

I also have this problem. Chrome01May2011 Windows 7.

I can now understand why the problem occurs, but it still leaves me with a missing UI feature.

I'm happy with selectables grabbing all the mouse events, but as a UI feature I would like different things to happen on a single click (a simple selection) and a double click (to specify another action, edit in my case).

Should I open a feature request?

nameanew

Re: Selectable dosn't fire click event

9 years ago

I forgot to mention:

Setting the distance to > 0 does do the trick, but that then requires the user to move their mouse when selecting an item, something that cannot be guaranteed.

rdworth

Re: Re: Selectable dosn't fire click event

9 years ago

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.

I'm hesitant to say anything more on this thread because I've already provided quite a lot of detail above that covers this. This is as-designed, it is not a bug, we do not feel there's a feature to be added here.

steve4015

Re: Selectable dosn't fire click event

9 years ago

I know the thread's a little old, but I have to disagree, there *is* a worthwhile time where you want both click to select, and double-clicking to perform another action (which can occur along with the selection, in addition to it). But the current behavior prevents double clicking completely, and doesn't allow the developer to get around it. I had to do it with a setTimeout and a few tracking variables on the selected event, which is not ideal, mostly because I can't respect the user's chosen double click speed. I can show you a variety of desktop programs where you have a selectable list where double clicking not only selects, but also performs an additional action... this quite common. Image Gallery software where you can double click to open an image in a larger view, or edit the image, is the scenario I'm dealing with now, and I'm merely trying to duplicate functionality that already exists in equivalent desktop software.

maciej.py..

Re: Selectable dosn't fire click event

8 years ago

rdworth - just to say it straight: you arrogant.
Several users ask you to make dblclick possible and you reject they request, because you disagree with them. But this plugin is not for you personal use, but for community use.

What is simpler than add option: "propagateEvents: fasle" or handler "dblclick".
In time of writing long responses (several times in several threads), this feature will be already complete saving time a lot of people.

Just cannot understand you approach.

jqueryfan..

Re: Selectable dosn't fire click event

8 years ago

I have a similar problem. Setting distance > 0 isn't an option for me because I need selectable to fire on click.

My problem is that selectable kills the click event for elements regardless if they are excluded from the "Filter" setting. I have selectable and non-selectable elements in the same container. But the selectable widget kills click events for all of them. Is there something I'm not doing right?

scorpe51

Re: Selectable dosn't fire click event

8 years ago

Hey there,

The only thing I could do was this :

$('#tasksList').selectable({distance: 1});
$('#tasksList > li').dblclick(function() {
$('#tasksList > li').removeClass('ui-selected');
$(this).addClass('ui-selected');
});
$('#tasksList > li').click(function() {
$('#tasksList > li').removeClass('ui-selected');
$(this).addClass('ui-selected');
});

I have a list containing tasks, which are selectable. I use the distance so I could trigger a click or a double click, and I manually do what the selectable() function does not do for me: select when I click.

Does the trick for now!

Hope this helps, folks.

Cheers.

Alan Grid