のバリエーションでテキスト選択を無効にすることについてすべて見たり聞いたりしましたuser-selectが、それらのどれも私が抱えている問題に対して機能していません。Android では (そしておそらく iPhone でも)、テキストをタップ アンド ホールドすると、テキストが強調表示され、テキストをドラッグして選択するための小さなフラグが表示されます。それらを無効にする必要があります（画像を参照）：
私は-webkit-touch-callout役に立たなかったし、役に立たなかったようなことさえ試み$('body').on('select',function(e){e.preventDefault();return;});ました。また、これらを非表示にすることは役に立たないため、これらの安価なトリックも::selection:rgba(0,0,0,0);機能しません。選択は引き続き行われ、UI が混乱します。さらに、それらのフラグはまだそこにあると思います。
どんな考えでも素晴らしいでしょう。ありがとう！
-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);
これにより、すべてのブラウザで無効になります。
参照：
私が作成した上記の 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クラス名を追加して、アンカー リンクの選択と対話を維持します。.notSelectedspan tags
ステータスの更新:この更新されたjsFiddleにより、テキスト選択が無効になっていると他の機能が機能しない可能性があるという懸念が確認されました。この更新された jsFiddle に示されているのは、太字テキストがテキスト選択可能でない場合でも、太字テキストがクリックされたときにブラウザー アラートを発生させる jQuery クリック イベント リスナーです。
-webkit-user-select：none; 4.1までAndroidでサポートされていませんでした（申し訳ありません）。