title: Using jQuery selectable on table rows, links in table not working
body: <p>I want to use <a href="http://api.jqueryui.com/selectable/#option-tolerance" rel="nofollow">jQuery Selectable</a> to select rows from a table. The problem is that jQuery seems to hijack all click events so that I can't use anything clickable (links in my case) inside the table.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;table class="sel-table"&gt;
  &lt;thead&gt;
      &lt;th&gt;col1&lt;/th&gt;
      &lt;th&gt;col2&lt;/th&gt;
      &lt;th&gt;col3&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt; 
               &lt;a href="http://www.google.com"&gt;click me! a1&lt;/a&gt;
          &lt;/td&gt;
          &lt;td&gt;a2&lt;/td&gt;
          &lt;td&gt;a3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;b1&lt;/td&gt;
          &lt;td&gt;b2&lt;/td&gt;
          &lt;td&gt;b3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;c1&lt;/td&gt;
          &lt;td&gt;c2&lt;/td&gt;
          &lt;td&gt;c3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  .ui-selectable&gt;.ui-selected
      {
          background-color: #a6c9e2;
      }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(".sel-table&gt;tbody").selectable({filter: 'tr'});
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/qt67rf12/" rel="nofollow">http://jsfiddle.net/qt67rf12/</a></p>
  
  <p>When you click the link, nothing happens, selectable processes the event instead. However, the middle button (open in new tab) works perfectly. What's preventing the default action on link and how can I fix it?</p>