如何通过光标拖动来阻止文本/元素选择

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

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

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

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

在您开始拖动鼠标并移动处理程序时，就像这样：

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;
}

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

你需要调用event.preventDefault()在双方down和move事件，以保持浏览器选择文本。

例如（使用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;
});

这是一个很旧的帖子。它可能无法完全回答这种情况，但是我将CSS用于解决方案：

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

我想发表评论，但是我没有足够的声誉。使用@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中的事件。

试试这个：

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

这可以通过大多数浏览器中的CSS和unselectableIE中的expando来实现。在这里看到我的答案：如何使用CSS禁用文本选择突出显示？

只需按以下方式选择调用blur（）函数来防止它：

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

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

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