Webサイトの場合、ユーザーが画面を「長押し」したときにカスタムコンテキストメニューを表示します。コード内に jQuery Longclick リスナーを作成して、カスタムコンテキストメニューを表示しました。コンテキストメニューは表示されますが、iPadのデフォルトのコンテキストメニューも表示されます! preventDefault()
をリスナーのイベントに追加することでこれを防止しようとしましたが、これは機能しません。
function showContextMenu(e){
e.preventDefault();
// code to show custom context menu
}
$("#myId").click(500, showContextMenu);
質問
Longclickプラグインには、iPad用の特定の処理があります(このスニペット ソースコード と仮定):
if (!(/iphone|ipad|iPod/i).test(navigator.userAgent)){
$(this)
.bind(_mousedown_, schedule)
.bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
.bind(_click_, click)
}
だから、これは私の2番目の質問に答えると思います(プラグインが正しいイベントを使用すると仮定)。
JDandChipsに pointing を教えてくれてありがとう。 longclickプラグインとの組み合わせで完全に機能します。ドキュメンテーションのために、私が何をしたかを示すために私自身の答えを投稿します。
HTML:
<script type="text/javascript"
src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>
<p><a href="http://www.google.com/">Longclick me!</a></p>
Javascriptはすでに問題ありませんでした:
function longClickHandler(e){
e.preventDefault();
$("body").append("<p>You longclicked. Nice!</p>");
}
$("p a").longclick(250, longClickHandler);
修正は、これらのルールをスタイルシートに追加することでした。
body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
Update: jQuery Longclick プラグインはiPad上のSafariでのみ動作し、Google Chromeでは動作しないようです!私は現時点でそれを検討しています。
更新2:Longclick JavascriptをFiddleのソースに埋め込みました。次のエラーが発生したためです。 in Chrome(https
による):)
「 https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js 」からのスクリプトの実行を拒否しました。MIMEタイプ(「text/plain」)は実行可能、および厳密なMIMEタイプチェックが有効になっています。
更新されたバージョンを参照してください: http://jsfiddle.net/z9ZNU/53/
<style type="text/css">
*:not(input):not(textarea) {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
</style>
アンカーボタンタグのみを無効にする場合は、これを使用します。
a {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
簡単なCSSソリューション:
html {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
ユーザー選択は、テキスト/エリアの強調表示を無効にします。
touch-calloutは、コンテキストメニューのポップアップを無効にします。
私はiPadを持っていないのでソリューションをテストできませんでしたが、解決した同様の質問に出くわしました。それがあなたの助けになるかどうかはわかりませんが、ここにリンクがあります: jQuery Mobile(iOS)でアンカーのデフォルトの動作を無効にする方法
_-webkit-
_プロパティに依存する必要はありません。
リンクがJavascript呼び出しである場合、href="void(0)"
を完全に削除するのと同じくらい簡単です! ontouchend
またはonclick
属性は引き続き機能します。リンクをオリジナルに見せたい場合は、次のcssを追加してください。
_a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }
_
これは、特にページに数百のリンクがある場合に、はるかにスムーズに実行されます。
SEO損失を犠牲にして、これを「実際の」ページリンクに拡張することもできます。
_<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>
_
ほとんどのWebサイトでは正確なプラクティスではありませんが、specificモバイルフレンドリーな状況(モバイルWebアプリ)の場合、これは非常に重要です。
ハッピーコーディング!
このgithubリポジトリは私のために機能します。私の場合、UIWebViewを使用してiPadアプリを作成します。
JavaScriptを使用する必要はありません。CSSを使用して実行できます。
画像のコンテキストメニューのみを無効にするには、img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; }
特定のクラスのコンテキストメニューを無効にする必要がある場合は、.className{-webkit-touch-callout: none !important; -webkit-user-select: none !important; }