Сделайте элемент неуправляемым (щелкните объекты за ним)

92

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

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

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

Благодарность!

— Hannebaumsaway
источник

181

Установка CSS - pointer-events: noneдолжна удалить любое взаимодействие мыши с изображением. Поддерживается неплохо во всех версиях, кроме IE.

Вот полный список возможных значений pointer-events.

— Крис Браун
источник

2

Отлично! Раньше не сталкивался pointer-events, это именно то, что я искал. Спасибо!

— hannebaumsaway

1

@Dusty Kinda имеет смысл, вы отключаете взаимодействие с мышью, но хотите взаимодействия с мышью. Каков ваш конкретный вариант использования? С точки зрения UX это кажется нелогичным, поскольку указатель подразумевает, что элемент доступен для щелчка. Если вы создадите JSFiddle, я могу посмотреть.

— Крис Браун

@ChrisBrown изменение курсора было немного затруднительным. Вот кое- что из того, что я придумал jsfiddle.net/cxwvdos0 Довольно безумно просто отключить кнопку на одну секунду и не изменить курсор. jQuery, unbindи bindя думаю, сработало бы, если бы я хотел преобразовать свои анонимные функции. Спасибо за ответ!

— Дасти

не работает на мобильных устройствах.

— Hamendra Sunthwal

17

CSS Pointer Events - это то, на что вы хотите обратить внимание. В вашем случае установите для указателей-событий значение «none». Взгляните на этот JSFiddle для примера ... http://jsfiddle.net/dppJw/1/

Обратите внимание, что при двойном щелчке по значку вы все равно щелкаете абзац.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}

— Терри
источник

1

Спасибо за пример!

— hannebaumsaway 06

Один щелчок * и пример кода (щелчок по значку) не работают для меня в FF 68.0.

— Эндрю

3

Если вы хотите использовать JavaScript:

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

Развернуть фрагмент

— Хусам Эбиш
источник