Android 移动网络 - 禁用长按/点按文本选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11237936/
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
Mobile Web - Disable long-touch/taphold text selection
提问by Brad Orego
I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):
我已经看到/听说过关于使用 的变体禁用文本选择的所有内容user-select，但是这些都不能解决我遇到的问题。在 Android 上（我假设在 iPhone 上），如果您点击并按住文本，它会突出显示它并显示小标志以拖动和选择文本。我需要禁用那些（见图）：
I've tried -webkit-touch-calloutto no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;});to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0);won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.
我尝试过-webkit-touch-callout无济于事，甚至尝试过$('body').on('select',function(e){e.preventDefault();return;});无济于事之类的事情。像这样的廉价技巧::selection:rgba(0,0,0,0);也行不通，因为隐藏这些也无济于事 - 选择仍然会发生，并且会破坏 UI。另外，我猜这些标志仍然存在。
Any thoughts would be great. Thanks!
任何想法都会很棒。谢谢！
采纳答案by arttronics
Reference:
参考：
The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selectedin Androidor iOSdevices (along with desktop browsers too).
我制作的上述 jsFiddle Demo 使用插件来防止在Android或iOS设备（以及桌面浏览器）中选择任何文本块。
It's easy to use and here is the sample markup once the jQuery plugin is installed.
它易于使用，这是安装 jQuery 插件后的示例标记。
Sample HTML:
示例 HTML：
<p class="notSelectable">This text is not selectable</p>
<p> This text is selectable</p>
Sample jQuery:
示例jQuery：
$(document).ready(function(){
$('.notSelectable').disableSelection();
});
Plugin code:
插件代码：
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
return this;
}
});
Per your message comment:I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
根据您的留言评论：I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
I would simply would use a wrapperthat is notaffected by this plugin, yet it's text-contents are protected using this plugin.
我会简单地将使用的包装是不是受到这个插件，但它的文本内容使用这个插件保护。
To allow interaction with a link in a block of text, you can use span tagsfor all but the link and add class name .notSelectedfor those span tagsonly, thus preserving selection and interaction of the anchors link.
要允许与文本块中的链接进行交互，您可以使用span tags除链接之外的所有链接并仅为.notSelected那些添加类名span tags，从而保留锚链接的选择和交互。
Status Update:This updated jsFiddleconfirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.
状态更新：此更新的jsFiddle确认您担心在禁用文本选择时其他功能可能无法正常工作。在此更新的 jsFiddle 中显示的是 jQuery 单击事件侦听器，它会在单击粗体文本时触发浏览器警报，即使该粗体文本不可文本选择。
回答by CoreyRS
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
This will disable it for every browser going.
这将为每个浏览器禁用它。
回答by John Reck
-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).
-webkit-user-select:none; 直到 4.1 才支持 Android（抱歉）。
