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

Pour diverses raisons, je dois mettre un (généralement) transparent <div> sur du texte. Cependant, cela signifie que le texte ne peut pas être cliqué (par exemple, pour cliquer sur des liens ou sélectionnez-le). Serait-il possible de simplement rendre cette div "invisible" aux clics et autres événements de la souris?HTML/CSS: Rendre un div "invisible" aux clics?

Par exemple, le overlay div couvre couvre le texte, mais je voudrais être en mesure de cliquer/sélectionner le texte à travers le overlay div:

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

Source

2010-08-21 David Wolever

La réponse courte est non. (A été discuté plusieurs fois, mais les dupes sont difficiles à trouver pour cela, ne peuvent pas penser à de bons mots-clés ...) Qu'est-ce que vous avez besoin de la DIV transparente pour? –

Je ne pense pas que ce soit possible. Peut-être que vous parlez des «diverses raisons», c'est-à-dire de ce que vous voulez vraiment accomplir? – davehauser

@Null Je retiendrai le -1 jusqu'à ce que l'OP sache clairement ce qu'il veut faire. –

128

Il peut être fait en utilisant le 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-navigateur.

#overlay { 
    pointer-events: none; 
}

Source

2010-08-21 19:43:57

Ah, ça a l'air bien! Maintenant, le seul problème est que je dois faire accepter à certains enfants * des événements de pointeur ... Mais peut-être Je peux comprendre cela.Merci! –

Cool: 'pointer-events: visible' semble que ça va faire * exactement * ce que je veux.Merci! –

Fonctionne dans le chrome! J'adore que c'est possible! –

Il peut être fait par réamorçage l'événement après que vous masquer temporairement la superposition.

Voir la première réponse à cette question: HTML "overlay" which allows clicks to fall through to elements behind it

Source

2010-08-21 19:28:53

-1

Alternative pour désactiver tous les événements qui sont attachés avec des balises par défaut

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

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

Source

2015-07-27 12:13:31

'jquery' utilise maintenant' off() 'en faveur de' unbind() ', et ne supprime que les gestionnaires, n'empêche pas le div de capturer le clic. – pmoleri

tous les événements (ou poussin) sur un div est unbind() Vous pouvez faire ceci en cachant 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(); 
}

Source

2016-04-25 16:05:06

Utilisez cette jQuery

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

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

Source

2018-02-27 20:14:10

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

Répondre

Questions connexes