Предотвращение контекстного меню по умолчанию на longpress/longclick в мобильном Safari (iPad/iPhone)

Для веб-сайта я хочу показать пользовательское контекстное меню, когда пользователь "нажимает" на экран. Я создал слушатель jQuery Longclick в своем коде, чтобы показать пользовательское контекстное меню. Отображается контекстное меню, но также отображается контекстное меню iPad по умолчанию! Я попытался предотвратить это, добавив функцию preventDefault() к событию в моем прослушивателе, но это не работает:

function showContextMenu(e){
  e.preventDefault();
  // code to show custom context menu
}

$("#myId").click(500, showContextMenu);

Вопросы

Можете ли вы запретить показывать контекстное меню iPad по умолчанию?
Можно ли это сделать с помощью плагина jQuery Longclick?

Плагин Longclick имеет некоторую специфическую обработку для iPad (исходя из этого фрагмента исходного кода):

if (!(/iphone|ipad|ipod/i).test(navigator.userAgent)){
  $(this)
  .bind(_mousedown_, schedule)
  .bind([_mousemove_, _mouseup_, _mouseout_, _contextmenu_].join(' '), annul)
  .bind(_click_, click)
}

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

Ответы

Ответ 1

Спасибо JDandChips за указание на решение. Он отлично работает в сочетании с плагином longclick. Для документации я выложу свой собственный ответ, чтобы показать, что я сделал.

HTML:

<script type="text/javascript"
        src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>

<p><a href="http://www.google.com/">Longclick me!</a></p>

Javascript уже был в порядке:

function longClickHandler(e){
  e.preventDefault();
  $("body").append("<p>You longclicked. Nice!</p>");
}

$("p a").longclick(250, longClickHandler);

Исправление состояло в том, чтобы добавить эти правила в таблицу стилей:

body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }

Пример отключенного контекстного меню.

Обновление: плагин jQuery Longclick работает только в Safari на iPad, а не в Google Chrome! Я смотрю на это в данный момент.

Обновление 2: Я встроил JavaScript Longclick в исходный код скрипты, потому что в Chrome я получал следующую ошибку (из-за https):

Отказался выполнять скрипт из " https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js ", потому что его тип MIME ("text/plain") не исполняется, и строгая проверка типов MIME включен.

Смотрите обновленную версию: http://jsfiddle.net/z9ZNU/53/

Ответ 2

<style type="text/css">
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}       
</style>

Если вы хотите отключить только тег кнопки привязки, используйте это:

a {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}

Ответ 3

Быстрое решение css:

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

user-select отключает выделение текста/областей.
touch-callout отключает контекстное меню.

Ответ 4

У меня нет iPad, поэтому я не мог протестировать решение, но я столкнулся с похожим вопросом, который был разрешен. Я не знаю, поможет ли это вам, но вот ссылка: Как отключить поведение якоря в jQuery Mobile (iOS) по умолчанию

Ответ 5

Нет необходимости полагаться на свойства -webkit-.

Если ваша ссылка - это вызов Javascript, это так же просто, как удаление href="void(0)" полностью! Ваши атрибуты ontouchend или onclick будут по-прежнему работать. Если вы хотите, чтобы ссылка выглядела оригинальной, добавьте этот css:

a .originalLink { color: blue; text-decoration: underline; cursor: pointer; }

Это будет работать намного гладко, особенно если на странице есть сотни ссылок.

Вы также можете распространить это на "реальные" ссылки на страницы за счет потери SEO:

<a class="originalLink" onclick="location.href='http://mylink';">Real URL Link</a>

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

Счастливое кодирование!

Ответ 6

Этот репозиторий github работает для меня. В моем случае я пишу приложение iPad с помощью UIWebView.

https://github.com/vaidik/jquery-longpress

Ответ 7

Не нужно использовать JavaScript, это можно сделать с помощью CSS.

Чтобы отключить контекстное меню только для изображений, используйте img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; } img{ -webkit-touch-callout: none !important; -webkit-user-select: none !important; }

Если нам нужно отключить контекстное меню для определенных классов, используйте .className{-webkit-touch-callout: none !important; -webkit-user-select: none !important; } .className{-webkit-touch-callout: none !important; -webkit-user-select: none !important; }