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

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>

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