 <p>The <code>start</code> event is a tricksy faux one. What you need to do is attach your code to cancel event bubbling directly to the <code>mousedown</code> event of the <code>ul</code> itself, and make sure your event handler is executed first.</p> <p>You'll see in the jQuery docs for <code>event.stopPropagation</code> this little line:</p> <blockquote> <p>Note that this will not prevent other handlers on the same element from running.</p> </blockquote> <p>So, whilst <code>event.stopPropagation</code> will stop the event bubbling any further up the DOM, it won't stop the other event handlers attach to the <code>ul</code> being called. For that you need <code>event.stopImmediatePropagation</code> to stop the <code>selectable</code> event handler getting called.</p> <p>Based on the <a href="http://jqueryui.com/demos/selectable/" rel="nofollow noreferrer">selectable demo page</a>, this code snippet successfully cancels the bubble:</p> <pre><code>$(function() { $("#selectable").mousedown(function (evt) { evt.stopImmediatePropagation(); return false; }); $("#selectable").selectable(); }); </code></pre> <p>Note that you must add your event handler to the <code>ul</code> object <em>before</em> you execute the <code>.selectable()</code> setup function in order to sneak in and pop the event bubble first.</p>