web-dev-qa-db-ja.com

モバイルSafari（iPad / iPhone）での長押し/長クリックでのデフォルトのコンテキストメニューの防止

Webサイトの場合、ユーザーが画面を「長押し」したときにカスタムコンテキストメニューを表示します。コード内に jQuery Longclick リスナーを作成して、カスタムコンテキストメニューを表示しました。コンテキストメニューは表示されますが、iPadのデフォルトのコンテキストメニューも表示されます！ preventDefault() をリスナーのイベントに追加することでこれを防止しようとしましたが、これは機能しません。

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

質問

  1. IPadのデフォルトのコンテキストメニューが表示されないようにできますか？
  2. JQuery Longclickプラグインを使用して実行できますか？

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番目の質問に答えると思います（プラグインが正しいイベントを使用すると仮定）。

javascriptjqueryiphoneipadmobile-safari
28
Jasper de Vries

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

無効なコンテキストメニューexample .

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/

25
Jasper de Vries
<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 */
}
16
Narsingh Tomar

簡単なCSSソリューション：

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

ユーザー選択は、テキスト/エリアの強調表示を無効にします。
touch-calloutは、コンテキストメニューのポップアップを無効にします。

8
Federico

私はiPadを持っていないのでソリューションをテストできませんでしたが、解決した同様の質問に出くわしました。それがあなたの助けになるかどうかはわかりませんが、ここにリンクがあります： jQuery Mobile（iOS）でアンカーのデフォルトの動作を無効にする方法

2
JDandChips

_-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アプリ）の場合、これは非常に重要です。

ハッピーコーディング！

1
Aaron Gillion

このgithubリポジトリは私のために機能します。私の場合、UIWebViewを使用してiPadアプリを作成します。

https://github.com/vaidik/jquery-longpress

0
Dody Rachmat Wicaksono

JavaScriptを使用する必要はありません。CSSを使用して実行できます。

画像のコンテキストメニューのみを無効にするには、img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; }

特定のクラスのコンテキストメニューを無効にする必要がある場合は、.className{-webkit-touch-callout: none !important; -webkit-user-select: none !important; }

0
Pranav K