如何防止使用光标拖动进行文本/元素选择
如何防止使用光标拖动进行文本/元素选择
提问于 2011-03-25 15:50:03
我做了一个分页控件，我注意到当单击按钮时，很容易意外地选择单个图像和文本。有可能防止这种情况发生吗？
为了澄清选择，我的意思是用鼠标突出显示。(尝试将鼠标从屏幕的一侧拖动到另一侧。)
如果您尝试突出显示此网格中的文本/控件，则无法将其选中。这是怎么做到的呢？Link
回答 7
Stack Overflow用户
发布于 2013-10-04 00:17:00
对于拖动，您将捕获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;
});Stack Overflow用户
发布于 2018-09-05 11:19:22
这是一个非常古老的帖子。它可能不能完全满足这种情况，但我使用CSS作为我解决方案：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;Stack Overflow用户
发布于 2013-09-19 16:53:39
我想发表评论，但我没有足够的声誉。使用@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上注册为事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5429827
复制相关文章
相似问题