Uczyń element niemożliwym do kliknięcia (kliknij elementy za nim)

92

Mam stały obraz, który nakłada się na stronę, gdy użytkownik przewija ekran dotykowy (telefon komórkowy).

Chcę, aby ten obraz był „niemożliwy do kliknięcia”, „nieaktywny” lub cokolwiek innego, tak aby jeśli użytkownik dotknął tego obrazu i przeciągnął z niego, strona za nim nadal przewijała się tak, jakby obrazu nie było „blokując” interakcję.

czy to możliwe? W razie potrzeby mógłbym spróbować przedstawić zrzuty ekranu ilustrujące to, co mam na myśli.

Dzięki!

html css mobile scroll touch hannebaumsaway
źródło

Odpowiedzi:

181

Ustawienie CSS - pointer-events: nonepowinno usunąć jakąkolwiek interakcję myszy z obrazem. Obsługiwane całkiem dobrze we wszystkich oprócz IE.

Oto pełna lista wartości, które pointer-eventsmogą przyjąć.

Chris Brown
źródło
2
Idealny! Nie spotkałem pointer-eventswcześniej, to jest dokładnie to, czego szukałem. Dziękuję Ci!
hannebaumsaway
1
@Dusty Kinda ma sens, wyłączasz interakcje myszy, ale chcesz interakcji myszy. Jaki jest Twój konkretny przypadek użycia? Z perspektywy UX, która wydaje się sprzeczna z intuicją, ponieważ wskaźnik sugeruje, że element jest klikalny. Jeśli zrzucisz razem JSFiddle, mogę rzucić okiem.
Chris Brown
@ChrisBrown zmiana kursora była trochę przepychana. Oto trochę tego, co wymyśliłem z jsfiddle.net/cxwvdos0 Trochę szalone, aby wyłączyć przycisk na jedną sekundę i nie zmieniać kursora. jQuery unbindi bindmyślę, że zadziałałoby, gdybym chciał przekonwertować moje anonimowe funkcje. Jednak dzięki za odpowiedź!
Zakurzony
nie działa na urządzeniach mobilnych.
Hamendra Sunthwal
17

CSS Pointer Events to coś, na co chcesz spojrzeć. W twoim przypadku ustaw pointer-events na „none”. Spójrz na ten JSFiddle, aby zobaczyć przykład ... http://jsfiddle.net/dppJw/1/

Zwróć uwagę, że dwukrotne kliknięcie ikony nadal będzie oznaczać kliknięcie akapitu.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}
Terry
źródło
1
Dzięki za przykład!
hannebaumsaway
Pojedyncze kliknięcie *, a przykładowy kod (kliknięcie ikony) nie działa dla mnie w FF 68.0.
Andrew,
3

Jeśli chcesz używać 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>
Rozwiń fragment

Husam Ebish
źródło