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

Question

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

澄清选择我的意思是用鼠标突出显示.(尝试将鼠标从屏幕的一侧拖到另一侧.)

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

Answer 1

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

你开始拖动mousedown和移动处理程序之类的东西 -

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 2

对于拖动,您正在捕获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;
});

Answer 3

我想发表评论,但我没有足够的声誉.使用@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 4

这是一个非常古老的职位。它可能无法完全回答这种情况，但是我将CSS用于解决方案：

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

Answer 5

试试这个:

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

Answer 6

这可以通过大多数浏览器中的CSS和unselectableIE中的expando 来实现.请在此处查看我的答案:如何禁用使用CSS突出显示文本？