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

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

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

42
android javascript mobile-webkit

10 ответов

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

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

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

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

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

8

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

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

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

node.ontouchstart = absorbEvent_;

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

node.ontouchstart = node.onclick;

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

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

5

Это можно сделать использование CSS:

img {
  pointer-events: none;
}
5

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

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
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;
1
<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 в обработчике событий.

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

0

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

0

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

-3