Отключение контекстного меню на длинных нажатиях на Android

Я хотел бы отключить контекстное меню, появившееся после длинного нажатия (коснуться и удерживать) на изображениях в моем веб-приложении. Я видел сообщения с разными идеями, как это сделать, но никто из них, похоже, не работает для меня.

Есть ли способ сделать это на Android через HTML/CSS/Javascript?

Ответы

Ответ 1

Это должно работать на 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>

Ответ 2

Контекстное меню имеет свое собственное событие. Вам просто нужно поймать его и остановить его от распространения.

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};

Ответ 3

Для меня поглощение всех событий не было вариантом, так как я хотел отключить длительные загрузки, в то же время позволяя пользователю увеличивать и панорамировать изображение. Я смог решить это с помощью css и html только путем разбиения "щита" div поверх изображения следующим образом:

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

Надеюсь, это поможет кому-то!

Ответ 4

Я использую полный пример Nurik, но элемент (входное изображение на моей странице) был отключен и для щелчка.

Я меняю исходную строку следующим образом:

исходная строка:

node.ontouchstart = absorbEvent_;

мое изменение:

node.ontouchstart = node.onclick;

с этим подходом я отключить всплывающее меню сохранения изображений в журнале, но сохранить событие click.

Я тестирую 7-дюймовый планшет с Android 2.2 под браузером Dolphin HD и отлично работает!

Ответ 5

Это можно сделать с помощью CSS:

img {
  pointer-events: none;
}

Ответ 6

Используйте эти коды CSS для мобильных устройств

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

Ответ 7

<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, в некоторых браузерах.

Ответ 8

У нас была аналогичная проблема. Вышеуказанные предложения не работали для меня в браузере Andoid, но я обнаружил, что отображение проблемного изображения в качестве фонового изображения CSS, а не встроенного изображения устраняет проблему.

Ответ 9

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;

Ответ 10

У меня была похожая проблема. Я пробовал пару решений из этой темы и другую тему для сафари по той же проблеме (Предотвращение контекстного меню по умолчанию при длинном нажатии/длинном клике в мобильном Safari (iPad/iPhone)). Плохо то, что я не мог использовать onTouchStart, onTouchEnd и т.д.

Только предотвратить событие от onContextMenu. Фрагмент из React 16.5.2. Испытано только в Chrome.

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

Ответ 11

Это отключит копирование, но не отключит выбор.

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

Работает в webView.

Ответ 12

С помощью встроенного javascript нет событий, вызываемых для контекстного меню. Возможно, в мире Java есть что-то... На веб-сайте Android есть несколько проблем, связанных с событиями javascript (например, фокус не работает).