Зробіть елемент неможливим для натискання (клацніть елементи позаду нього)

92

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

Я хочу зробити це зображення "неможливим" або "неактивним" або чим завгодно, так що, якщо користувач торкається цього зображення та перетягує його, сторінка за ним все одно прокручується так, ніби зображення не було там, "блокуючи" взаємодію.

Чи можливо це? Якщо потрібно, я можу спробувати надати знімки екрану, що ілюструють, що я маю на увазі.

Дякую!

— ханнебаумсавей
джерело

181

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

Ось повний перелік значень pointer-events.

— Кріс Браун
джерело

2

Ідеально! Я раніше не бігав pointer-events, це саме те, що я шукав. Дякую!

— hannebaumsaway

1

@Dusty Kinda має сенс, ви відключаєте взаємодію з мишею, але бажаєте взаємодії з мишею. Який конкретний випадок використання? З точки зору UX, який здається протилежним інтуїтивно зрозумілим, оскільки вказівник передбачає, що елемент можна натискати. Якщо ви зібрали JSFiddle, я можу поглянути.

— Chris Brown

@ChrisBrown зміна курсору трохи штовхнула. Ось трохи того, що я придумав jsfiddle.net/cxwvdos0 Начебто божевільний, щоб просто відключити кнопку на одну секунду і не змінити курсор. jQuery, unbindі bindя думаю, що це спрацювало б, якби я хотів перетворити свої анонімні функції. Дякую за відповідь!

— Запилений

17

Події CSS Pointer - це те, на що ви хочете подивитися. У вашому випадку встановіть для покажчика подій значення "none". Подивіться на цей JSFiddle для прикладу ... http://jsfiddle.net/dppJw/1/

Зверніть увагу, що подвійне клацання на піктограмі все одно означатиме, що ви натискаєте абзац.

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

— Террі
джерело

1

Дякую за приклад!

— hannebaumsaway

Одне клацання *, і приклад коду (клацання піктограми) не працює для мене у 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>

Розгорніть фрагмент

— Хусам Ебіш
джерело