64

Webアプリケーションで画像を長押し（長押し）した後に表示されるコンテキストメニューを無効にしたいのですが。さまざまなアイデアの投稿を見たことがありますが、どれもうまくいかないようです。

HTML / CSS / Javascriptを介してAndroidでこれを行う方法はありますか？

4

12 に答える 12

174

コンテキストメニューには独自のイベントがあります。あなたはそれを捕まえて、それが伝播するのを止める必要があります。

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};
于 2015-02-26T16:55:41.323 に答える
39

これは1.6以降で機能するはずです（正しく思い出せば）。1.5以前の回避策はないと思います。

<!DOCTYPE html>
<html>
<head>
  <script>
    function absorbEvent_(event) {
      var e = event || window.event;
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    }

    function preventLongPressMenu(node) {
      node.ontouchstart = absorbEvent_;
      node.ontouchmove = absorbEvent_;
      node.ontouchend = absorbEvent_;
      node.ontouchcancel = absorbEvent_;
    }

    function init() {
      preventLongPressMenu(document.getElementById('theimage'));
    }
  </script>
</head>
<body onload="init()">
  <img id="theimage" src="http://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">
</body>
</html>
于 2010-08-09T08:46:23.400 に答える
8

私にとっては、ユーザーが画像をズームおよびパンできるようにしながら、長押しのダウンロードを無効にしたかったので、すべてのイベントを吸収することはできませんでした。次のように、画像の上に「シールド」divを重ねるだけで、cssとhtmlを使用してこれを解決できました。

<div class="img-container">
  <div class="shield"></div>
  <img src="path.jpg">
</div>

img {
    max-width: 100%;
}

.shield {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

これが誰かに役立つことを願っています！

于 2013-07-12T15:29:01.070 に答える
7

それはCSSを使用して行うことができます：

img {
  pointer-events: none;
}
于 2015-04-14T14:21:47.350 に答える
5

Nurikによる完全な例を使用しますが、要素（私のページの入力画像）もクリックに対して無効になっています。

これで元の行を変更します：

元の行：

node.ontouchstart = absorbEvent_;

私の変更：

node.ontouchstart = node.onclick;

この承認により、logpressのポップアップ画像保存メニューを無効にしますが、クリックイベントは保持します。

DolphinHDブラウザでAndroid2.2を搭載した7インチタブレットでテストしていますが、正常に動作します。

于 2012-01-30T18:13:16.240 に答える
5

コピーは無効になりますが、選択は無効になりません。

document.oncontextmenu = function() {return false;};

webViewで動作します。

于 2019-07-03T15:36:31.870 に答える
4

このCSSコードをモバイルに使用する

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
于 2014-11-06T13:49:12.843 に答える
3 
pointer-events: none; // for Android

-webkit-touch-callout: none; // for iOS

-webkit-user-select: none; 

-khtml-user-select: none; 

-moz-user-select: none; 

-ms-user-select: none; 

user-select: none;
于 2017-06-12T14:55:50.090 に答える
1

同様の問題が発生しました。同じ問題について、このスレッドとサファリの別のスレッドからいくつかの解決策を試しました（モバイルSafari（iPad / iPhone）での長押し/長クリックでのデフォルトのコンテキストメニューの防止）。悪い部分は、onTouchStart、onTouchEndなどを使用できなかったことです...

onContextMenuからのイベントのみを防止します。React16.5.2からのスニペット。クロムのみでテスト済み。

    <img {...props} onContextMenu={event => event.preventDefault()}
    onTouchStart={touchStart}
    onTouchEnd={touchEnd} />

それが誰かを助けることを願っています。乾杯！

于 2018-11-19T15:42:12.283 に答える
0 
<a id="moo" href=''> </a>

<script type="text/javascript">
    var moo = document.getElementById('moo');

    function handler(event) {
        event = event || context_menu.event;

        if (event.stopPropagation)
            event.stopPropagation();

        event.cancelBubble = true;
        return false;
    }

    moo.innerHTML = 'right-click here';

    moo.onclick = handler;
    moo.onmousedown = handler;
    moo.onmouseup = handler;
</script>

onContextMenuイベントをキャプチャし、イベントハンドラーでfalseを返します。

一部のブラウザでは、クリックイベントをキャプチャし、event.buttonを使用してどのマウスボタンでイベントが発生したかを確認することもできます。

于 2010-08-09T06:21:23.533 に答える
0

同様の問題がありました。上記の提案はAndoidブラウザーでは機能しませんでしたが、問題のある画像を埋め込み画像ではなくCSS背景画像として表示すると問題が解決することがわかりました。

于 2016-09-04T22:03:24.227 に答える
-4

生のJavaScriptを介して、コンテキストメニューに対して呼び出されるイベントはありません。おそらくJavaの世界には何かがあります...AndroidWebkitのjavascriptイベント（フォーカスが正しく機能しないなど）に関して実際にはいくつかの問題があります。

于 2010-08-09T06:42:09.210 に答える