Prevent text selection after double click

Question

I m handling the dblclick event on a span in my web app  A side-effect is that the double click selects text on the page  How can I prevent this selection from happening

User · Answer

For those looking for a solution for Angular 2    You can use the mousedown output of the table cell    lt td  ngFor            mousedown   onMouseDown  event        dblclick    onDblClick  event   gt         lt  td gt    And prevent if the detail  gt  1   public onMouseDown mouseEvent  MouseEvent         prevent text selection for dbl clicks    if  mouseEvent detail  gt  1  mouseEvent preventDefault       public onDblClick mouseEvent  MouseEvent        todo  do what you really want to do         The dblclick output continues to work as expected

User · Answer

If you are trying to completely prevent selecting text by any method as well as on a double click only  you can use the user-select  none css attribute   I have tested in Chrome 68  but according to https   caniuse com  search user-select it should work in the other current normal user browsers   Behaviorally  in Chrome 68 it is inherited by child elements  and did not allow selecting an element s contained text even if when text surrounding and including the element was selected

User · Answer

Old thread  but I came up with a solution that I believe is cleaner since it does not disable every even bound to the object  and only prevent random and unwanted text selections on the page  It is straightforward  and works well for me   Here is an example  I want to prevent text-selection when I click several time on the object with the class  arrow-right         arrow-right   hover function      body   css  userSelect   none       function      body   css  userSelect   auto          HTH

User · Answer

A simple Javascript function that makes the content inside a page-element unselectable   function makeUnselectable elem      if  typeof elem      string       elem   document getElementById elem     if  elem        elem onselectstart   function     return false         elem style MozUserSelect    none       elem style KhtmlUserSelect    none       elem unselectable    on

User · Answer

or  on mozilla    document body onselectstart   function     return false       Or any html object   On IE   document body onmousedown   function     return false       valid for any html object as well

User · Answer

To prevent text selection ONLY after a double click   You could use MouseEvent detail property  For mousedown or mouseup events  it is 1 plus the current click count   document addEventListener  mousedown   function  event      if  event detail  gt  1        event preventDefault           of course  you still do not know what you prevent here           You could also check event ctrlKey event shiftKey event altKey        to not prevent something useful         false     See https   developer mozilla org en-US docs Web API UIEvent detail

User · Answer

function clearSelection         if document selection  amp  amp  document selection empty            document selection empty          else if window getSelection            var sel   window getSelection            sel removeAllRanges              You can also apply these styles to the span for all non-IE browsers and IE10   span no selection       user-select  none     standard syntax        -webkit-user-select  none     webkit  safari  chrome  browsers        -moz-user-select  none     mozilla browsers        -khtml-user-select  none     webkit  konqueror  browsers        -ms-user-select  none     IE10

User · Answer

FWIW  I set user-select  none to the parent element of those child elements that I don t want somehow selected when double clicking anywhere on the parent element  And it works  Cool thing is contenteditable  true   text selection and etc  still works on the child elements    So like    lt div style  user-select  none  gt     lt p gt haha lt  p gt     lt p gt haha lt  p gt     lt p gt haha lt  p gt     lt p gt haha lt  p gt   lt  div gt

User · Answer

I had the same problem  I solved it by switching to  lt a gt  and add onclick  return false    so that clicking on it won t add a new entry to browser history

User · Answer

To prevent IE 8 CTRL and SHIFT click text selection on individual element  var obj   document createElement  DIV    obj onselectstart   function      return false      To prevent text selection on document  window onload   function      document onselectstart   function        return false

User · Answer

If you are using Vue JS  just append  mousedown prevent  quot  quot  to your element and it is magically going to disappear

User · Answer

In plain javascript   element addEventListener  mousedown   function e   e preventDefault       false     Or with jQuery   jQuery element  mousedown function e   e preventDefault

[javascript] Prevent text selection after double click

Examples related to javascript

Examples related to selection-object