移动网络 - 禁用长按/轻敲文本选择

Question

我已经看到/听到了关于使用user-select的变体禁用文本选择的所有信息，但这些都没有解决我遇到的问题。在Android上（我假设在iPhone上），如果你点击并保持文本，它会突出显示它并带来一些标记来拖动和选择文本。我需要禁用它们（见图）：

我试过-webkit-touch-callout无济于事，甚至尝试$('body').on('select',function(e){e.preventDefault();return;});这样的事情也无济于事。像::selection:rgba(0,0,0,0);这样的廉价技巧也不起作用，因为隐藏它们无济于事 - 选择仍然会发生并且会破坏用户界面。另外我猜这些旗帜仍然存在。

任何想法都会很棒。谢谢！

Answer 1

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

这将禁用每个浏览器。

Answer 2

<强>参考：

jsFiddle Demo with Plugin

我制作的上述jsFiddle演示使用了一个插件，允许您 阻止在 Android 或 > iOS 设备（以及桌面浏览器）。

它易于使用，这是安装jQuery插件后的示例标记。

示例HTML：

<p class="notSelectable">This text is not selectable</p>

<p> This text is selectable</p>

示例jQuery：

$(document).ready(function(){

   $('.notSelectable').disableSelection();

});

插件代码：

$.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;
    }
});

根据您的留言评论： I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.

我只是使用受此插件 影响的包装，但它的文本内容受此插件保护。

要允许与文本块中的链接进行互动，您可以对链接以外的所有链接使用span tags，并仅为.notSelected添加类名span tags，从而保留选择权和锚链接的相互作用。

状态更新：此更新jsFiddle确认您担心在禁用文本选择时可能无法使用其他功能。在这个更新的jsFiddle中显示的是jQuery Click事件监听器，它将在点击粗体文本时触发浏览器警报，即使该粗体文本不是文本可选的。

Answer 3

-webkit-用户选择：无;在4.1之前不支持Android（对不起）。