Я хотел бы отключить контекстное меню, которое появляется после долгого нажатия (касание и удержание) изображений в моем веб-приложении. Я видел сообщения с разными идеями, как это сделать, но ни один из них, похоже, не работает для меня.
Есть ли способ сделать это на Android через HTML/CSS/Javascript?
Это должно работать на 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>
img.addEventListener('contetxmenu', function(e) { e.preventDefault(); return false; }, false); должно работать нет? Приведенное выше решение предотвратит ввод всех данных.
- person gman; 18.05.2015
Контекстное меню имеет собственное событие. Вам просто нужно поймать его и остановить его распространение.
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
Для меня поглощение всех событий не было вариантом, поскольку я хотел отключить загрузку при длительном нажатии, но при этом позволить пользователю масштабировать и панорамировать изображение. Я смог решить эту проблему с помощью 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;
}
Надеюсь, это поможет кому-то!
position:relative в родительский контейнер, чтобы родитель не занял все пространство. Это особенно сложно, если родителем является td, с которым связан ontouchstart или другой обработчик событий взаимодействия, поскольку визуально вы не увидите, что td занимает всю эту область.
- person Daniel F; 23.01.2019
Это можно сделать с помощью CSS:
img {
pointer-events: none;
}
Я использую полный пример Нурика, но элемент (входное изображение на моей странице) также был отключен для клика.
Я изменяю исходную строку следующим образом:
исходная строка:
node.ontouchstart = absorbEvent_;
мое изменение:
node.ontouchstart = node.onclick;
с помощью этого подхода я отключаю всплывающее меню сохранения изображения в logpress, но сохраняю событие щелчка.
Я тестирую на 7-дюймовом планшете с Android 2.2 под браузером Dolphin HD и отлично работает!
Используйте эти коды CSS для мобильных устройств
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
Это отключит копирование, но не отключит выбор.
document.oncontextmenu = function() {return false;};
Работает в вебвиви.
У меня была аналогичная проблема. Я пробовал пару решений из этого потока и другой поток для сафари по той же проблеме (Предотвращение контекстного меню по умолчанию при длительном нажатии / длительном щелчке в мобильном Safari (iPad / iPhone)). Плохая часть заключалась в том, что я не мог использовать onTouchStart, onTouchEnd и т.д.
Предотвращайте событие только от onContextMenu. Фрагмент из React 16.5.2. Проверял только в хроме.
<img {...props} onContextMenu={event => event.preventDefault()}
onTouchStart={touchStart}
onTouchEnd={touchEnd} />Надеюсь, это поможет кому-то. Ваше здоровье!
<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, в любом случае в некоторых браузерах.
Только что была аналогичная проблема. Приведенные выше предложения не сработали для меня в браузере Android, но я обнаружил, что отображение проблемного изображения в качестве фонового изображения CSS, а не встроенного изображения, решило проблему.
Через необработанный javascript нет событий, которые вызываются для контекстного меню. Возможно, в мире Java есть что-то... На самом деле есть несколько проблем, связанных с событиями javascript (например, неправильная работа фокуса) в веб-ките Android.
pointer-events: none; по сути является return false CSS для элементов, поэтому в данном случае моя кнопка не работает.
- person Vael Victus; 19.01.2021
