Passez la souris à travers des événements de positionnement absolu de l'élément

Je suis d'essayer de capturer les événements de la souris sur un élément avec un autre positionnement absolu de l'élément sur le dessus de cela.

Droit maintenant, événements, sur le positionnement absolu de l'élément de la frapper et de la bulle jusqu'à son parent, mais je veux qu'il soit "transparent" pour ces événements de souris et de les transmettre à tout ce qui est derrière elle. Comment devrais-je mettre en œuvre cette?

InformationsquelleAutor s4y | 2009-06-17

435
```
pointer-events: none;
```
Est une propriété CSS qui rend les événements de "passer à travers" l'élément auquel il s'applique et rend l'événement de se produire sur l'élément "en-dessous".

Voir pour plus de détails: https://developer.mozilla.org/en/css/pointer-events

Il n'est pas pris en charge jusqu'à IE 11; tous les autres fournisseurs de soutien depuis assez peu de temps (soutien global était d'environ 92% en 12/'16): http://caniuse.com/#feat=pointer-events (merci à @s4y pour assurer le lien dans les commentaires).
- Merci! C'est une solution parfaite pour les modernes (et de non-IE) des navigateurs. À l'époque, cette question a été posté, je ne pense pas que pointer-events existé! Je peut passer de la accepté de répondre à celle-ci à un certain point.
- Woah, c'est juste qu'il m'a sauvé heures.
- J'ai juste changé la accepté de répondre à celui-ci. Soutien pour pointer-events n'est toujours pas super génial, mais il est de mieux en mieux. Pour une plus-compatibles en option, rendez-vous avec @JedSchmidt de réponse.
- merci, mec. excellente solution!
- tout simplement génial
- tu es mon étoile, merci
- Merci, je ne savais pas que cela existe réellement. il m'a sauvé heures
- ce n'est pas de travailler sur la dernière version de google chrome pour moi.
- Génial! Une note sur la prise en charge du navigateur... vous maudissent IE! déjoué à nouveau. Un jour, c'est à dire, un jour.
- Est-il un équivalent pour les événements Tactiles? touch-events: none; ou similaire?
- Je crois que les événements tactiles compter que les événements de pointeur, mais je me trompe peut-être. N'hésitez pas à poser une question distincte et un lien vers celui-ci.
- Il y a un polyfill pour IE: github.com/kmewhort/pointer_events_polyfill
- Jamais allé à consulter Google à propos de n'importe quoi pour trouver une réponse aussi simple que cela. Tout simplement génial.
- Sauf que moi j'ai besoin de cet événement de se produire pour à la fois l'élément transparent et également les éléments ci-dessous il.
- Même si je l'ai trouvé à environ 3 heures dans la création de contourner ce problème, merci de me garder de le remplir!
- Si l'on clique sur un élément et commence à glisser, puis passe la souris sur un élément de soi-disant marqué comme "pointer-events:none;" malheureusement, le soi-disant élément inerte sera toujours arrêter le chaîne d'événements.
- Serait utile si vous avait indiqué où mettre cette. Appartient-elle sur le contenu en dessous de la superposition ou de la superposition?
- J'ai clarifié la réponse – est-ce clair maintenant où appliquer la propriété?
- Mais que faire si vous voulez juste laisser certains cas comme le défilement de l'événement de passer à travers, mais pour l'élément de plus haut niveau afin de continuer à répondre à tous les autres événements. Réglage de l'aiguille des événements à aucun tue tous les évènements de l'élément supérieur.
InformationsquelleAutor JanD
47

Si vous avez besoin d'mousedown, vous pourriez être en mesure de le faire avec l' document.elementFromPoint méthode, par:
1. retrait de la couche supérieure sur mousedown,
2. passage de la x et y les coordonnées de l'événement pour la document.elementFromPoint méthode pour récupérer l'élément en dessous, et puis
3. la restauration de la couche supérieure.
- Plus verbeux explication ici: vinylfox.com/forwarding-mouse-events-through-layers
- Génial, je ne savais pas que la méthode même de l'existence! Il peut également être utilisé très facilement pour obtenir tous les éléments sous le curseur, à l'aide d'un pendant boucle pour obtenir le premier élément, puis le cacher afin de trouver le suivant. Prenez ma version ici: gist.github.com/Pichan/5498404
- Le problème avec cette solution est qu'elle ne fonctionne pas avec le zoom de la page. Pour les appareils mobiles ou les navigateurs de bureau, zoom X Y coordonnées ne signifient plus rien, et il n'y a aucun moyen de calculer le zoom. je crois que pour les pincée de zoom, il est en fait impossible.
InformationsquelleAutor Jed Schmidt
34

Également bon de savoir...

Pointeur-événements peuvent être désactivées pour un parent de l'élément (probablement transparent div) et encore être activée pour les éléments enfants.
Ceci est utile si vous travaillez avec de multiples qui se chevauchent div couches, où vous voulez être en mesure cliquez sur les éléments enfants d'un calque. Pour cela, tous les parentalité divs obtenir pointer-events: none et cliquez-enfants obtenir pointeur-événements réactivé par pointer-events: all
```
.parent {
    pointer-events:none;        
}
.child {
    pointer-events:all;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>
```
- Génial, juste après le haut de la découverte de pointer-events:none et l'imminence de la descente d'avoir des enfants les nœuds affectés, vous enregistrez le jour 🙂
- 😉 très heureux à ce sujet
- Peut-il être bouilli vers le bas pour seulement: .parent * { pointer-events:all; } pour les enfants?
InformationsquelleAutor Allisone
7

La raison pour laquelle vous ne recevez pas l'événement est parce que la position absolue de l'élément n'est pas un enfant de l'élément que vous êtes désireux de "clic" (bleu div). La façon la plus propre que je peux penser à est de mettre l'absolu de l'élément enfant de l'un, vous voulez cliqué, mais je suis en supposant que vous ne pouvez pas le faire ou tu n'aurais pas posté cette question ici 🙂

Une autre option serait d'enregistrer un gestionnaire d'événements click pour l'absolu de l'élément et l'appeler le gestionnaire de clic pour le bleu de la div, provoquant à la fois à clignoter.

En raison de la façon dont les événements de la bulle en haut à travers le DOM je ne suis pas sûr qu'il est plus simple de répondre pour vous, mais je suis très curieux de savoir si quelqu'un d'autre a des trucs que je ne sais pas!
- Merci pour la réponse, Loktar. Malheureusement, sur la vraie page, je ne vais pas savoir ce qui est en dessous le positionnement absolu de l'élément, et il peut y avoir plus d'une cible. La seule solution que je peux penser est saisissant les coordonnées de la souris et en les comparant à des cibles possibles pour voir si elles se croisent. Ce serait tout simplement méchant.
InformationsquelleAutor Loktar
3

Il y a une version javascript disponibles manuellement les redirections des événements à partir d'un div à l'autre.

Je l'ai nettoyé, et en a fait un plugin jQuery.

Voici le dépôt Github:
https://github.com/BaronVonSmeaton/jquery.forwardevents

Malheureusement, le but je l'utilise pour - superposition d'un masque sur Google Maps n'a pas de capture, cliquez et faites glisser les événements, et le curseur de la souris ne change pas qui dégrade l'expérience utilisateur assez que j'ai juste décidé de cacher le masque de sous IE et Opera - les deux navigateurs qui ne soutien à des événements de pointeur.

InformationsquelleAutor Mikepote
1

Si vous connaissez les éléments qui doivent les événements de la souris, et si votre superposition est transparent, vous pouvez simplement mettre le z-index de quelque chose de plus élevé que la superposition. Tous les événements doivent bien sûr, le travail dans ce cas sur tous les navigateurs.

InformationsquelleAutor ricosrealm

Vous devez vous connecter pour publier un commentaire.