logo标签列表

如何在Firefox中防止拖动鼠标时选择文本？

javascriptfirefox
7

我想知道那些拖拽小部件是如何取消拖动元素和页面中其他元素的文本选择的。我尝试了下面的代码，在IE8中可以正常工作（不能选取文本），但在Firefox中无法运行（仍然可以选取文本）。

<!DOCTYPE html>
<html>
<body>
  <p>Hello World</p>
  <script type="text/javascript">
    document.onmousemove = function() {
      return false;
  }
  </script>
</body>
</html>
请参见：https://dev59.com/fnVD5IYBdhLWcg3wJIIK - Christian C. Salvadó
2个回答
8
或者，类似于您针对Moz的IE8解决方案：
document.body.style.MozUserSelect="none"
5

曾经有这样一种情况，我在页面上使用水平滚动条时，拖动滚动条时会选择页面上的文本。我使用jQuery在我的滚动开始函数被触发时将“unselectable”类添加到body中，在我的滚动停止函数执行时移除该类。代码如下：

function startDrag(event){
    $('body').addClass('unselectable');

    // start drag code
}

function stopDrag(event){
    $('body').removeClass('unselectable');

    // stop drag code
}

这就是我的 CSS 文档中 unselectable 类的样式。

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
为了使其更加高效（并且只是稍微长一点点），我们可以使用document.body.classList.add('unselectable');和document.body.classList.remove('unselectable');来消除每个这些事件实例中需要从DOM重新选择body标签的需要，我认为这对用户应该尽可能响应。不过，今天我才在Chrome中看到了这个垂直滚动条的问题，并且不得不想知道为什么它会发生？！ - Troy Niemeier
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接