Отключение контекстного меню при длительных нажатиях на Android - PullRequest
Новая
       15

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

50 голосов
/ 05 августа 2010

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

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

Ответы [ 12 ]

134 голосов
/ 26 февраля 2015

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

window.oncontextmenu = function(event) {
     event.preventDefault();
     event.stopPropagation();
     return false;
};
33 голосов
/ 09 августа 2010

Это должно работать на 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>
8 голосов
/ 12 июля 2013

Для меня поглощение всех событий не было возможным, так как я хотел отключить долгую загрузку нажатием, в то же время позволяя пользователю увеличивать и перемещать изображение. Я смог решить эту проблему с помощью 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;
}

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

5 голосов
/ 14 апреля 2015

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

img {
  pointer-events: none;
}
5 голосов
/ 30 января 2012

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

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

оригиналстрока: 

node.ontouchstart = absorbEvent_;

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

node.ontouchstart = node.onclick;

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

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

3 голосов
/ 06 ноября 2014

Используйте эти коды CSS для мобильного телефона 

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
0 голосов
/ 03 июля 2019

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

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

Работает в webView.

0 голосов
/ 19 ноября 2018

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

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

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

Надеюсь, это кому-нибудь поможет.Ура!

0 голосов
/ 12 июня 2017 
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;
0 голосов
/ 05 сентября 2016

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

Страница:
...