4

I want to disable click on a certain <div> so that when you select the text on it, the text doesn't select.

I tried writing onclick="return false;" like in this fiddle http://jsfiddle.net/mageek/X6hqD/ but it doesn't work.

How can it work? (My goal isn't just disabling the select, it's the whole click).

Alexandre Khoury
  • 3,896
  • 5
  • 37
  • 58
  • 2
    try a search on stackoverflow : http://stackoverflow.com/questions/920049/javascript-css-disable-text-select – benoît Jun 25 '12 at 09:33
  • 1
    @benoît Thank you, can you post this as an answer so I can accept it? – Alexandre Khoury Jun 25 '12 at 09:37
  • possible duplicate of [css rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) – Sarfraz Jun 25 '12 at 14:58

4 Answers4

8
document.getElementById('div1').onmousedown = new function ("return false");
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Kasidesh Yontaradidthaworn
  • 156
  • 4
  • 1
    Finally, I accepted your answer because it's the real answer to my question (to disable click). The other anwers were working but were disabling other things too that aren't disabled with you answer. – Alexandre Khoury Jun 26 '12 at 15:10
1

If you want to disable selection of the text only, use:

<div onselectstart='return false;'>
    text
</div>

div{
   -moz-user-select: none;-webkit-user-select: none;
   -khtml-user-select:none;o-user-select:none;
   user-select: none;
}
Christoph
  • 50,121
  • 21
  • 99
  • 128
  • `onselectstart` is for IE `-moz-user-select: none;` is for firefox and `-webkit-user-select: none;` is for safari and google chrome. For what is `user-select: none;`? – Alexandre Khoury Jun 25 '12 at 09:42
  • @Mageek it's for internet explorer who does not understand user-select. – Christoph Jun 25 '12 at 09:43
  • `user-select: none;` is for internet explorer who does not understand `user-select` ????????? – Alexandre Khoury Jun 25 '12 at 09:44
  • @Mageek misread, onselect = IE, user-select = standard, and browser who don't implement it according to the specs (older ones) you need the vendor-prefixes (-moz, -o, -webkit, -ms). – Christoph Jun 25 '12 at 09:45
  • you mean `-khtml-user-select: none;` and `-o-user-select: none;` ? – Alexandre Khoury Jun 25 '12 at 09:46
  • 1
    @Mageek it's like with all the other css attributes. You have a standard (`user-select`) and then you have to add the vendor prefixes for browsers with older implementations. – Christoph Jun 25 '12 at 09:51
1

You can try this CSS

<style type="text/css" media="print,screen" >
  .unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
    </style>

<div class="unselectable">
asdasdsadsadsad<br>asdasdasd
</div>

<br><br>

<div>
qqqqqqqqqqqqqqqq<br>asdasdasd
</div>
PraveenVenu
  • 8,217
  • 4
  • 30
  • 39
1
<div id="div-test-id" style="width:100px;height:100px;background-color:yellow;">Lorem ipsum</div>

<script type="text/javascript">
var div_click_escape=function(eventObject){
      return false;
};

$(function(){
    $("#div-test-id").click(div_click_escape);
    $("#div-test-id").mousedown(div_click_escape);
    $("#div-test-id").mouseup(div_click_escape);
}
</script>

Will avoid to select the text.

jittakal
  • 919
  • 6
  • 8