disable text highlighting on double click in jQuery

Question

I have this jQuery toggle. It work fine.

   <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>

 

        $("li").toggle(
          function () {
            $(this).css({"list-style-type":"disc", "color":"blue"});
          },
          function () {
            $(this).css({"list-style-type":"disc", "color":"red"});
          },
          function () {
            $(this).css({"list-style-type":"", "color":""});
          }
        );

The problem is when I do fast clicking, it highlighted the text in it. Is there a way to stop the text from being highlighted?

Answer 1

//function to be reused later
function clearSelection() {
  var sel ;
  if(document.selection && document.selection.empty){
    document.selection.empty() ;
  } else if(window.getSelection) {
    sel=window.getSelection();
    if(sel && sel.removeAllRanges)
      sel.removeAllRanges() ;
  }
}

$('p').click(clearSelection);

Source

Answer 2

I'm writing on iPhone, while away from the desk, but a quick Google turned up this page: disable text selection with jQuery.

Answer 3

window.getSelection().empty()