title: JQuery UI; Stop propagation of selectable events
body: <p>Basically I am using <a href="http://jqueryui.com/demos/selectable/" rel="nofollow noreferrer">jQuery ui's selectable</a> functionality on a <code>ul</code>, 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.</p>
  <p>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.</p>
  <p>Here is what I have for the jQuery <code>.selectable</code> <code>start</code> event:</p>
  <pre><code>start: function(event, ui) {
      var t = event.target;
      var cutoff  = t.scrollWidth + t.offsetLeft
      if (event.clientX &gt; cutoff)
      {
          console.log('NO!');
          console.log(event.type);
  
          //overkill
          event.stopPropagation();
          event.stopImmediatePropagation();
  
          if (event.stopPropagation) {
            event.stopPropagation();
          } else {
            event.cancelBubble = true;
          }
  
          return false;
      }
  }
  </code></pre>
  <p>All advice/solutions appreciated.</p>