移动互联网 - 禁用长触摸/ taphold文本选择(Mobile Web - Disable lo

我已经看到/听到的所有关于禁用文本选择与变化user-select ，但没有那些正在为我遇到的问题。在Android（和我相信在iPhone上），如果你点击并按住文本，它突出了它，并带来了小旗子拖动和选择文本。我需要禁用这些（见图片）：

我试过-webkit-touch-callout无济于事，甚至试图之类的东西$('body').on('select',function(e){e.preventDefault();return;}); 无济于事。而便宜的小把戏，比如::selection:rgba(0,0,0,0); 不会工作，因为隐藏这些不会帮助 - 选择仍然发生，它破坏了UI。另外，我猜这些标志仍然会在那里。

任何想法将是巨大的。谢谢！

Answer 1:

参考：

的jsfiddle演示与插件

以上的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的单击事件侦听器会火的时候，被点击了大胆的文本，即使大胆的文字不文本可选择的浏览器警报。

Answer 2:

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

这将禁用它为每一个浏览器去。