JQuery UI; Stop propagation of selectable events

Question

Basically I am using jQuery ui's selectable functionality on a ul, but the ul will often times have a scrollbar, and this scrollbar becomes unusable in Webkit browsers since when you try to click on it to grab it, the lasso for the selectable functionality is drawn overtop instead.

I have formulated a solution, which involves checking the position of the cursor in relation to the position and width of the ul to see if the cursor is over the scrollbar, and if so, stop propagation of the selectable 'start' event, but despite the conditional being met when it should be, neither returning false nor stopping progation of the event seems to prevent jQuery from progressing through the selectable events.

Here is what I have for the jQuery .selectable start event:

start: function(event, ui) {
    var t = event.target;
    var cutoff  = t.scrollWidth + t.offsetLeft
    if (event.clientX > cutoff)
    {
        console.log('NO!');
        console.log(event.type);

        //overkill
        event.stopPropagation();
        event.stopImmediatePropagation();

        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }

        return false;
    }
}

All advice/solutions appreciated.

Mctyre

When you say, "the lasso for the selectable functionality is drawn overtop instead", what is this lasso you're referring to? Can you take a screenshot? – Feldstein

Answer 1

The start event is a tricksy faux one. What you need to do is attach your code to cancel event bubbling directly to the mousedown event of the ul itself, and make sure your event handler is executed first.

You'll see in the jQuery docs for event.stopPropagation this little line:

Note that this will not prevent other handlers on the same element from running.

So, whilst event.stopPropagation will stop the event bubbling any further up the DOM, it won't stop the other event handlers attach to the ul being called. For that you need event.stopImmediatePropagation to stop the selectable event handler getting called.

Based on the selectable demo page, this code snippet successfully cancels the bubble:

$(function() {
    $("#selectable").mousedown(function (evt) {
        evt.stopImmediatePropagation();
        return false;
    });        
    $("#selectable").selectable();
});

Note that you must add your event handler to the ul object before you execute the .selectable() setup function in order to sneak in and pop the event bubble first.

Feldstein

Good analysis. Note that the return false statement will also encapsulate evt.stopPropagation(). IOW you don't necessarily need to do both. – Told

Thanks so much for your solution, it makes perfect sense now you've explained to me the nature of the .selectable events structure and the correct usage of stopProgation and stopImmediatePropagation and it works a treat! Thanks again! – Mctyre

I've submitted this to the jQuery bug tracker: dev.jqueryui.com/ticket/4441 hopefully they'll fix it. – Valadez

this helped me stop a click event from opening a modal when i clicked n dragged a jquery-ui resizable element. thx! – Kotz

Answer 2

Here's a slight variation on Sam C's solution that worked better for me (by only cancelling the mousedown event if it's fired on the element with the scrollbar):

$(function() {
    $("#selectable").mousedown(function (evt) {
        if ($(evt.originalEvent.target).hasClass('ui-dialog'))  // <--- variation
        {
            evt.stopImmediatePropagation();
            return false;
        }
        return true;
    });        
    $("#selectable").selectable();
});

Hammering

You probably meant if ($(evt.originalEvent.target).hasClass('ui-selectable')). This is what worked for me with a tbody as the container (tr are the selectees). – Inspired

Answer 3

Sam C's answer didn't work for me, probably because of the way I'd positioned #selectable. This is what I used:

$('#selectable')
  .mousedown(function (evt) {
    if (event.pageX > $(this).offset().left + $(this).width() - $.getScrollbarWidth())
    {
       evt.stopImmediatePropagation();
       return false;
    }
  })
  .selectable({filter: 'div'});

where $.getScrollbarWidth() is from here

Valadez