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, Thanks!

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.

Answer 2

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