title: JS stop highlighting occurring on (double)click
body: <p>I have a situation where if a button is doubleclicked on it highlights the whole button, which is quite annoying, so I've tried to fix it by adding <code>preventDefault()</code> to the function to stop highlighting occurring, although I can't seem to stop it happening :( <br>
  Could anyone please tell me why this is ignoring the <code>event.preventDefault();</code> and highlighting the button/text anyway?:</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="loading-boundary"&gt;
      &lt;div class="redesign-due-date-container"&gt;
          &lt;div class="property due_date flyout-owner overdue value-set" style="margin-left:-3px"&gt;
              &lt;div class="property-name"&gt;
                  &lt;span data-icon="calendar" class="calendar glyph toolbar-icon prod"&gt;&lt;/span&gt;
                  &lt;span class="grid_due_date overdue"&gt;Yesterday&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(".property.due_date").click(function(event) {
      event.stopPropagation();
      event.preventDefault();
  
      var e = $(".show-full-duedate");
  
      if (e.css("display") != "block") {
          $(this).addClass("focused");
          e.css("display", "block");
      } else {
          $(this).removeClass("focused");
          e.css("display", "none");
      }
  
      return false;
  });
  </code></pre>
  
  <p>I am using the latest version of Chrome to test.<br>
  Also, setting the CSS to stop highlighting stops all of the highlighting of the button, even when its not been clicked on, so that is not an option.</p>