37

Webサイトの場合、ユーザーが画面を「長押し」したときにカスタムコンテキストメニューを表示したいと思います。カスタムコンテキストメニューを表示するために、コードにjQueryLongclickリスナーを作成しました。コンテキストメニューが表示されますが、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番目の質問に答えると思います（プラグインが正しいイベントを使用したと仮定します）。

4

8 に答える 8

31

解決策を教えてくれたJDandChipsに感謝します。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はすでにOKでした：

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

無効なコンテキストメニューの例。

于 2012-09-18T07:42:09.350 に答える
19 
<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 */
}
于 2014-10-28T14:31:01.030 に答える
9

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

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

user-selectは、テキスト/領域の強調表示を無効にします。
touch-calloutは、コンテキストメニューのポップアップを無効にします。

于 2013-08-11T19:33:49.263 に答える
5

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

画像のみのコンテキストメニューを無効にするには、次を使用します

img{
-webkit-touch-callout: none !important; 
 -webkit-user-select: none !important; }

特定のクラスのコンテキストメニューを無効にする必要がある場合は、

.className{-webkit-touch-callout: none !important; 
-webkit-user-select: none !important; }
于 2019-07-03T09:15:29.523 に答える
3

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

于 2012-09-14T12:53:05.457 に答える
1

-webkit-プロパティに依存する必要はありません。

href="void(0)"リンクがJavascript呼び出しの場合、完全に削除するのと同じくらい簡単です。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サイトでは必ずしも適切な方法ではありませんが、特定のモバイルフレンドリーな状況（モバイルWebアプリ）では、これが重要になる可能性があります。

ハッピーコーディング！

于 2015-05-31T00:29:03.063 に答える
0

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

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

于 2017-11-26T21:48:04.727 に答える
0

私はこれを使用しました：

<p onclick="window.location.href='https://google.com‘“&gt;Link</p>
于 2021-06-02T12:20:16.970 に答える