How can I remove address element highlighting when I double click using the chrome browser?

Question

I have the following code block and javascript that work as intended.

<li>
  <a id="menuPrev">
    <div class="sprite-blank"></div>
  </a>
</li>

$('#menuPrev')
  .click(function () {
     ...
     return false;
  })
  .doubleClick(function() {
     return false;
  });

When a user double clicks on the address link a blue line appears below the <a> element a the bottom of the <li> element. This only happens with the Chrome browser and on a double click. From what I can see it's the default color behaviour in Chrome when I double click on something. It looks confusing and if possible I would like to stop this happening.

So far I have found that if I change the code and add href="#" to the link then this does not happen. However when I do this the link address appears at the bottom of the page and I don't want this.

Does anyone have any idea how I can solve this and make the browser ignore my double clicking?

Answer 1

Try href="javascript:void(0);" to prevent browser from displaying the link in the status bar.

Also try event.preventDefault(); to "as the name suggests"

Answer 2

It sounds like you've already solved it, you just need to prevent the browser from displaying the link in the status bar. The first thing you have is a link with no href. Chrome flat out just doesn't like this because it considers the link to be malformed. So you should place your href="#" back in place and add this to your jQuery:

$('#menuPrev')
  .click(function () {
     ...
     return false;
  })
  .doubleClick(function() {
     return false;
  })
  .mouseover(function() {
     window.status = '';
  });