Javascript 如何通过光标拖动防止文本/元素选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5429827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I prevent text/element selection with cursor drag
提问by The Muffin Man
I made a paging control and I noticed that while clicking on the buttons it is very easy to accidentally select the individual images and text. Is it possible to prevent this?
我做了一个分页控件，我注意到在单击按钮时很容易不小心选择单个图像和文本。有没有可能防止这种情况？
To clarify selecting I mean highlighting with the mouse. (Try dragging your mouse from one side of the screen to the other.)
为了澄清选择，我的意思是用鼠标突出显示。（尝试将鼠标从屏幕的一侧拖到另一侧。）
If you try to highlight the text/controls in this grid it can't be selected. How is that done? Link
如果您尝试突出显示此网格中的文本/控件，则无法选择它。这是怎么做的？ 关联
回答by kennebec
dragging and selecting both initialize on a mouse down event and update on subsequent mouse moves. When you handle the events to begin dragging, or to follow the mouse, cancel the event's bubbling and override the default browser return:
拖动和选择在鼠标按下事件时初始化并在随后的鼠标移动时更新。当您处理事件以开始拖动或跟随鼠标时，取消事件的冒泡并覆盖默认浏览器返回：
something like this in your begin dragging mousedown and move handlers-
在您开始拖动鼠标并移动处理程序时，类似这样的事情-
e=e || window.event; pauseEvent(e);
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;
}
回答by Robin Daugherty
For dragging, you're capturing the mousedownand mousemoveevents. (And hopefully touchstartand touchmoveevents as well, to support touch interfaces.)
对于拖动，您正在捕获mousedown和mousemove事件。（希望touchstart和touchmove事件一样，以支持触摸界面。）
You'll need to call event.preventDefault()in both the downand moveevents in order to keep the browser from selecting text.
您需要同时调用event.preventDefault()thedown和move事件，以防止浏览器选择文本。
For example (using jQuery):
例如（使用 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;
});
回答by AndreaBogazzi
I wanted to comment, but i don't have enough reputation. Using the suggested function from @kennebec solved my problem in my javascript dragging library. It works flawlessy.
我想发表评论，但我没有足够的声誉。使用来自@kennebec 的建议函数解决了我的 javascript 拖动库中的问题。它完美无缺。
function pauseEvent(e){
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble=true;
e.returnValue=false;
return false;
}
i called it in my mousedown and mousemove custom function, immediately after i can recognize i clicked on the right element. If i call it just on top of the function i just kill any click on the document. My function is registered as an event on document.body.
我在我的 mousedown 和 mousemove 自定义函数中调用了它，在我识别出我点击了正确的元素之后。如果我只是在函数的顶部调用它，我只会杀死对文档的任何点击。我的函数在 document.body 上注册为事件。
回答by Mike
This is a very old post. It may not answer exactly that situation, but i use CSS for my solution:
这是一个很老的帖子。它可能无法准确回答这种情况，但我使用 CSS 作为我的解决方案：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
回答by Alex Pacurar
try this:
尝试这个：
document.onselectstart = function()
{
window.getSelection().removeAllRanges();
};
回答by Tim Down
This can be achieved using CSS in most browsers and the unselectableexpando in IE. See my answer here: How to disable text selection highlighting using CSS?
这可以通过在大多数浏览器中使用 CSS 和unselectable在 IE 中使用expando来实现。在此处查看我的答案：如何使用 CSS 禁用文本选择突出显示？
回答by Mehdi
simply prevent it by calling blur() function when selected as following :
只需通过选中如下时调用Blur（）函数来防止它：
<input Value="test" onSelect="blur();">
回答by Erkki Teedla
If you need to block text selection for a certain element using JavaScript, then the simplest method for me was to assign userSelect style like this:
如果您需要使用 JavaScript 阻止某个元素的文本选择，那么对我来说最简单的方法是像这样分配 userSelect 样式：
var myElement = document.createElement('div');
myElement.style.userSelect = 'none';
