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>

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

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

0

Utilisez ce jQuery

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

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


-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");

jqueryutilise désormais off()en faveur de unbind(), et supprime uniquement les gestionnaires, n'empêche pas le div de capturer le clic.
pmoleri
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.