如何防止使用光标拖动选择文本/元素

Question

我做了一个分页控件，我注意到在单击按钮时很容易意外选择单个图像和文本。是否可以防止这种情况发生？

为了澄清选择，我的意思是用鼠标突出显示。 （尝试将鼠标从屏幕的一侧拖动到另一侧。）

如果您尝试突出显示此网格中的文本/控件，则无法选择它。这是怎么做的？ Link

Answer 1

试试这个：

document.onselectstart = function()
{
    window.getSelection().removeAllRanges();
};

Answer 2

这可以在大多数浏览器中使用 CSS 和 IE 中的 unselectable expando 来实现。在这里查看我的答案：How to disable text selection highlighting using CSS?

Answer 3

拖动和选择鼠标按下事件时初始化并在随后的鼠标移动时更新。当您处理开始拖动或跟随鼠标的事件时，取消事件的冒泡并覆盖默认浏览器返回：

在您开始拖动鼠标并移动处理程序时会出现类似的情况-

e=e || window.event;
pauseEvent(e);

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

Answer 4

我想发表评论，但我没有足够的声誉。 使用来自@kennebec 的建议函数解决了我在 javascript 拖动库中的问题。 它完美无瑕。

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

我在我的 mousedown 和 mousemove 自定义函数中调用了它，在我识别出我点击了正确的元素之后。如果我只是在函数顶部调用它，我只会杀死对文档的任何点击。 我的函数在 document.body 上注册为一个事件。

Answer 5

对于拖动，您正在捕获 mousedown 和 mousemove 事件。 （希望 touchstart 和 touchmove 事件也能支持触摸界面。）

您需要在down 和move 事件中调用event.preventDefault()，以防止浏览器选择文本。

例如（使用 jQuery）：

var mouseDown = false;
$(element).on('mousedown touchstart', function(event) {
  event.preventDefault();
  mouseDown = true;
});
$(element).on('mousemove touchmove', function(event) {
  event.preventDefault();
  if(mouseDown) {
    // Do something here.
  }
});
$(window.document).on('mouseup touchend', function(event) {
  // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element.
  mouseDown = false;
});

Answer 6

如下选择时调用 blur() 函数来防止它：

 <input Value="test" onSelect="blur();">

Answer 7

如果您需要使用 JavaScript 阻止某个元素的文本选择，那么对我来说最简单的方法是像这样分配 userSelect 样式：

var myElement = document.createElement('div');
myElement.style.userSelect = 'none';

Answer 8

这是一个非常古老的帖子。它可能无法完全回答这种情况，但我使用 CSS 作为我的解决方案：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;