HTML / CSS: rendere un div "invisibile" ai clic?

98

Per vari motivi, ho bisogno di mettere un testo (per lo più) trasparente <div>. Tuttavia, ciò significa che non è possibile fare clic sul testo (ad esempio, per fare clic sui collegamenti o selezionarlo). Sarebbe possibile rendere semplicemente questo div "invisibile" ai clic e ad altri eventi del mouse?

Ad esempio, il overlaydiv copre il testo, ma vorrei essere in grado di fare clic / selezionare il testo attraverso il overlaydiv:

<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>

html css events

— David Wolever
fonte

1

La risposta breve è no. (È stato discusso più volte, ma i duplicati sono difficili da trovare per questo, non riesco a pensare a buone parole chiave ...) A cosa ti serve il DIV trasparente?

— Pekka

2

Non credo sia possibile. Forse parli dei "vari motivi", ovvero cosa vuoi veramente ottenere?

— davehauser

1

@Null Tratterrei -1 fino a quando non sarà chiaro cosa vuole fare l'OP.

— Pekka

1

NullUserException - In che modo ciò che propone impedire alle persone di copiare contenuti dal suo sito web? Se non altro, sta cercando di fare il contrario: desidera ovviare all'effetto del suo div trasparente (di rendere il testo più difficile da fare clic e selezionare).

— Hammerite

@ Hammer Hai ragione. Ho rimosso il voto negativo.

— NullUserException

159

Può essere fatto usando CSS pointer-events. Questa proprietà è supportata in Firefox 3.6+, Chrome 2+, IE 11+ e Safari 4+. Sfortunatamente, non sono a conoscenza di una soluzione alternativa per browser diversi.

#overlay {
  pointer-events: none;
}

— Ionuț G. Stan
fonte

3

Ah, sembra buono! L'unico problema è che devo fare in modo che alcuni bambini accettino gli eventi di puntamento ... Ma forse posso capirlo. Grazie!

— David Wolever

2

Fantastico: pointer-events: visiblesembra che farà esattamente quello che voglio. Grazie!

— David Wolever

Funziona in cromo! Adoro che questo sia possibile!

— BT

C'è un polyfill di eventi puntatore: github.com/kmewhort/pointer_events_polyfill

— rink.attendant.6

Risposta in avanti più semplice e più rigorosa!

— Jones G

2

Può essere fatto riapplicando l'evento dopo aver nascosto temporaneamente l'overlay.

Vedi la prima risposta a questa domanda: HTML "overlay" che consente ai clic di passare agli elementi sottostanti

— Joeri Sebrechts
fonte

0

Puoi farlo nascondendo l'overlay in questo modo:

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();
}

— Paperino
fonte

0

Usa questo jQuery

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

sostituire "div" con l'ID o l'elemento

— Dean Van Greunen
fonte

-1

Un'alternativa per disabilitare tutti gli eventi (o pulcino) su un div è unbind () tutti gli eventi allegati ai tag per impostazione predefinita

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

o

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

— Muhammad Nasir
fonte

jqueryora utilizza off()a favore di unbind()e rimuove solo i gestori, non impedisce al div di acquisire il clic.

— pmoleri