移动网络 - 禁用长按/点击文本选择

Question

我已经看到/听到了有关使用 user-select 的变体禁用文本选择的所有信息，但这些都不能解决我遇到的问题。在 Android 上（我猜是在 iPhone 上），如果您点击并按住文本，它会突出显示它并显示一些小标志来拖动和选择文本。我需要禁用这些（见图）：

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

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

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 Demo 使用了一个插件来让您防止在 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 来表示除链接之外的所有链接，并为那些span tags 添加类名.notSelected，从而保留锚链接的选择和交互。

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

Answer 3

-webkit-用户选择：无； Android 4.1 之前不支持（抱歉）。