HTML / CSS: Rendre un div "invisible" aux clics?

98

Pour diverses raisons, je dois mettre un (principalement) transparent <div>sur certains textes. Cependant, cela signifie que le texte ne peut pas être cliqué (par exemple, pour cliquer sur des liens ou le sélectionner). Serait-il possible de simplement rendre ce div "invisible" aux clics et autres événements de souris?

Par exemple, le overlaydiv couvre le texte, mais j'aimerais pouvoir cliquer / sélectionner le texte via le 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
la source
1
La réponse courte est non. (Cela a été discuté plusieurs fois, mais les dupes sont difficiles à trouver pour cela, je ne peux pas trouver de bons mots-clés ...) Pourquoi avez-vous besoin du DIV transparent?
Pekka
2
Je ne pense pas que ce soit possible. Peut-être parlez-vous des «diverses raisons», c'est-à-dire ce que vous voulez vraiment réaliser?
davehauser
1
@Null Je retiendrais le -1 jusqu'à ce que ce que l'OP veuille faire soit clair.
Pekka
1
NullUserException - Comment ce qu'il propose empêcherait-il les gens de copier le contenu de son site Web? Si quoi que ce soit, il essaie de faire le contraire - il souhaite éviter l'effet de son div transparent (de rendre le texte plus difficile à cliquer et à sélectionner).
Hammerite
@Hammer Vous avez raison. J'ai supprimé le vote défavorable.
NullUserException

Réponses:

159

Cela peut être fait en utilisant CSS pointer-events. Cette propriété est prise en charge dans Firefox 3.6+, Chrome 2+, IE 11+ et Safari 4+. Malheureusement, je n'ai pas connaissance d'une solution de contournement inter-navigateurs.

#overlay {
  pointer-events: none;
}
Ionuț G. Stan
la source
3
Ah, ça a l'air bien! Maintenant, le seul problème est que je dois obliger certains enfants à accepter des événements de pointeur… Mais peut-être que je peux comprendre cela. Merci!
David Wolever
2
Cool: pointer-events: visibleon dirait qu'il fera exactement ce que je veux. Merci!
David Wolever
Fonctionne en chrome! J'adore que cela soit possible!
BT
Il y a un polyfill d'événements de pointeur: github.com/kmewhort/pointer_events_polyfill
rink.attendant.6
Réponse directe la plus simple et la plus précise!
Jones G
0

Vous pouvez le faire en masquant la superposition comme ceci:

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();
}
Donald Duck
la source
0

Utilisez ce jQuery

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

remplacer "div" par l'ID ou l'élément

Dean Van Greunen
la source
-1

Une alternative pour désactiver tous les événements (ou poussin) sur un div est unbind () tous les événements qui sont attachés avec des balises par défaut 

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

ou

  $('#myDivId').unbind("click");
Muhammad Nasir
la source
jqueryutilise désormais off()en faveur de unbind(), et supprime uniquement les gestionnaires, n'empêche pas le div de capturer le clic.
pmoleri