禁止双击文字选中

1.纯css方案

使用user-select: none实现，效果很好，缺点是不能用鼠标拖动选中了。

<div>少时诵诗书所所所所所所所</div>
<style>
  div{
    user-select: none;
  }
</style>

2.使用js实现-mousedown

在mousedown事件上阻止默认效果，效果很好。

<div id="sss">哒哒哒哒哒哒多多多</div>
<script>
  var ele  = document.querySelector('#sss')
  ele.addEventListener('mousedown',function (e) {
    if(e.detail > 1){
      e.preventDefault();
    }
  })
</script>

在这里使用了事件对象上的detail属性，这个属性是一个只读属性，记录在短时间内事件触发的次数，一般只用在click dbclick mousedown mouseup事件中。

在这里如果直接使用e.preventDefault()会出现和user-select: none的同样不能鼠标拖动选中的问题，所以只需要在第二次触发mousedown之后阻止默认效果，这样就能即实现双击不选中同时可以拖动选中。

需要注意的是在click事件中阻止默认效果是无效的，因为click事件的触发时机在mouseup之后，已经无法阻止了。

3.使用js实现-手动清除选中

这个方案不是阻止默认效果，而是等文字被选中后清除掉选中效果。 效果一般，因为会看到闪烁效果

<div id="sss">哒哒哒哒哒哒多多多</div>
<script>
  var ele = document.querySelector('#sss');
  ele.ondblclick = function (evt) {
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
    } else if (document.selection) {
      document.selection.empty();
    }
  };
</script>