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

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

2

Cela peut être fait en recréant l'événement après avoir masqué temporairement la superposition.

Voir la première réponse à cette question: "superposition" HTML qui permet aux clics de tomber sur les éléments derrière

— Joeri Sebrechts
source

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
source

0

Utilisez ce jQuery

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

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

— Dean Van Greunen
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
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