js或css指定元素点击时内容不可被选中

Posted 2020-10-10 菜鸟乐谷

一、css3中可以使用"user-select"属性：

        body{

                -webkit-user-select:none;/*谷歌 /Chrome*/

                -moz-user-select:none; /*火狐/Firefox*/

                -ms-user-select:none;    /*IE 10+*/

                user-select:none;

        }

        user-select:auto:默认，可以选中； none:不可选；text:只可选文本；all:父级；

二、js实现：

         document.onselectstart = function(){return false;}

        document.onselectstart = null ;

       jquery 实现：

       $("body").hover(function(){

            document.onselectstart = function(){return false;},

                                                 },

           function(){

               document.onselectstar=text;            

              }

         });

   注意：


 

 

 

 

 

             1、onselectstart事件不被input和textarea标签支持，而onselect事件只被input和textarea支持。
             2、Firefox/Opera不支持onselectstart事件Firefox中可以使用CSS "-moz-user-select:none"属性来禁止文本选定
             3、webkit浏览器可以使用“-khtml-user-select”，当然也可以使用onselectstart事件来阻止用户选定元素内文本，如下
                  <div onselectstart="return false">accc</div>

onselect

            onselect是在文本框（input、textarea）内的文本被选中时所触发的事件，其触发时间是在文本被选择以后（即文本已经被选择，已经

             显式的表现出来）。该事件只被input和textarea标签支持。