HTML/CSS: czy div jest "niewidoczny" dla kliknięć?

Z różnych powodów, muszę umieścić (przeważnie) przezroczysty <div> nad tekstem. Oznacza to jednak, że tekstu nie można kliknąć (np. Kliknąć łącza lub go zaznaczyć). Czy możliwe byłoby po prostu uczynienie tego div "niewidzialnym" kliknięciami i innymi zdarzeniami myszy?HTML/CSS: czy div jest "niewidoczny" dla kliknięć?

Na przykład overlay div obejmuje obejmuje tekst, ale chciałbym, aby móc kliknij/zaznaczyć tekst poprzez overlay Gr:

<div id="container"> 
    <p>Some text</p> 
    <div id="overlay" style="position: absolute; top: 0; 
          left: 0; width: 100%; height:100%"> 
     ... some content ... 
    </div> 
</div>

Źródło

2010-08-21 David Wolever

Krótka odpowiedź brzmi: nie. (Dyskutowano kilka razy, ale trudno jest znaleźć dupe, nie można wymyślić dobrych słów kluczowych ...) Do czego potrzebny jest przezroczysty DIV? –

Nie sądzę, że to możliwe. Może opowiadasz o "różnych przyczynach", czyli o tym, co naprawdę chcesz osiągnąć? – davehauser

@Null Zatrzymałbym -1, dopóki nie będzie jasne, co OP chce zrobić. –

128

Można to zrobić za pomocą CSS pointer-events. Ta właściwość jest obsługiwana w przeglądarkach Firefox 3.6+, Chrome 2+, IE 11+ i Safari 4+. Niestety nie mam wiedzy na temat sposobu obejścia tego problemu w różnych przeglądarkach.

#overlay { 
    pointer-events: none; 
}

Źródło

2010-08-21 19:43:57

Ah, to wygląda dobrze! Teraz jedynym problemem jest to, że muszę sprawić, żeby niektóre z dzieci * zaakceptowały * zdarzenia wskaźnikowe ... Ale może Dzięki! –

Cool: 'pointer-events: visible' wygląda tak, jak to zrobi * dokładnie * to, czego chcę.Dzięki! –

Działa w chromie! Kocham, że to jest możliwe! –

Można to zrobić przez refiring zdarzenie po ciebie tymczasowo ukryj nakładkę.

Zobacz pierwsza odpowiedź na to pytanie: HTML "overlay" which allows clicks to fall through to elements behind it

Źródło

2010-08-21 19:28:53

-1

Alternatywa dla wyłączania wszystkich zdarzeń (lub laska) na div jest unbind() wszystkie zdarzenia, które są związane z tagami domyślnie

$('#myDivId').unbind();

lub

$('#myDivId').unbind("click");

Źródło

2015-07-27 12:13:31

'jquery' teraz używa' off() 'na rzecz' unbind() 'i usuwa tylko procedury obsługi, nie zapobiega od przechwyceniu kliknięcia przez div. – pmoleri

Można zrobić to ukrywając nakładkę takiego:

overlay.onclick = function(){ 
    window.event.srcElement.style.visibility = "hidden"; 
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y); 
    window.event.srcElement.style.visibility = "visible"; 
    BottomElement.click(); 
}

Źródło

2016-04-25 16:05:06

Użyj tego jQuery

$("div").click(function(e){e.preventDefault();});

zastąpić "div" z identyfikatorem lub elementu

Źródło

2018-02-27 20:14:10

HTML/CSS: czy div jest "niewidoczny" dla kliknięć?

Odpowiedz

Powiązane problemy