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

Question

Pour diverses raisons, j'ai besoin de placer un

(principalement) transparent sur du texte. 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 aux autres événements de la souris?

Par exemple, le overlay div couvre le texte, mais j'aimerais pouvoir cliquer/sélectionner le texte à travers le overlay div:

    Some text

        ... some content ...

Answer 1

Vous pouvez le faire 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 compatible avec tous les navigateurs.

#overlay {
  pointer-events: none;
}

Answer 2

Cela peut être fait en réexcutant l'événement après avoir temporairement masqué le recouvrement.

Voir la première réponse à cette question: Recouvrement HTML qui permet aux clics de passer à travers les éléments situés derrière

Answer 3

Vous pouvez le faire en cachant le superposition de cette manière :

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

Answer 4

Utilisez ce jQuery

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

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

Answer 5

Une alternative pour désactiver tous les événements (ou clic) sur une division est de détacher tous les événements qui sont attachés par défaut avec des balises.

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

ou

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