Question Cliquez sur un DIV pour les éléments sous-jacents


j'ai un div qui a background:transparent, de même que border. En dessous de div, J'ai plus d'éléments.

Actuellement, je suis capable de cliquer sur les éléments sous-jacents lorsque je clique à l'extérieur de la superposition div. Cependant, je suis incapable de cliquer sur les éléments sous-jacents en cliquant directement sur la superposition div.

Je veux être en mesure de cliquer à travers ce div afin que je puisse cliquer sur les éléments sous-jacents.

My Problem


1236
2017-09-09 20:42


origine


Réponses:


Oui toi POUVEZ fais ceci.

En utilisant pointer-events: none avec des instructions conditionnelles CSS pour IE11 (ne fonctionne pas dans IE10 ou ci-dessous), vous pouvez obtenir une solution compatible avec tous les navigateurs pour ce problème.

En utilisant AlphaImageLoader, vous pouvez même mettre transparent .PNG/.GIFs dans la superposition div et ont des clics coulent à travers des éléments en dessous.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditionnel:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Voici une page d'exemple de base avec tout le code.


2127
2018-01-29 21:49



Aussi agréable à savoir ...
Vous pouvez désactiver les événements de pointeur dans un élément parent (probablement transparent div) mais l'activer pour ses éléments enfants.
C'est utile si vous travaillez avec de multiples couches div superposées, où vous voulez pouvoir cliquer sur des éléments enfants, tout en ayant les couches parentes ne réagissent pas du tout sur les événements de la souris. Pour que tous les divs parentales obtiennent pointer-events: none et ses enfants cliquables obtiennent des événements pointeur réactivés par pointer-events: auto 

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

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

186
2017-11-07 11:06



Cliquez à travers un DIV à l'élément sous-jacent fonctionne différemment dans les navigateurs. Opera a besoin d'un transfert manuel des événements, Firefox et Chrome comprennent les CSS pointer-events:none; et IE n'a besoin de rien avec un fond transparent; avec, par exemple, background:white; opacity:0; filter:Alpha(opacity=0); IE a besoin de redirection comme Opera.

Voir test d'expédition à http://jsfiddle.net/vovcat/wf25Q/1/ et http://caniuse.com/pointer-events. La propriété CSS Pointer-events a été déplacée de CSS3-UI à CSS4-UI.


37
2017-10-16 17:26



J'ajoute cette réponse parce que je ne l'ai pas vu ici dans son intégralité. J'ai été capable de le faire en utilisant elementFromPoint. Donc en gros:

  • attacher un clic à la div que vous voulez cliquer à travers
  • cache le
  • déterminer quel élément est sur le pointeur
  • tirez le clic sur l'élément là.
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

Dans mon cas, la division superposée est absolument positionnée - je ne suis pas sûre que cela fasse une différence. Cela fonctionne sur IE8 / 9, Safari Chrome et Firefox au moins.


16
2018-05-16 17:25



  1. Masquer superposer l'élément
  2. Déterminer les coordonnées du curseur
  3. Obtenir l'élément sur ces coordonnées
  4. Trigger cliquer sur l'élément
  5. Afficher à nouveau l'élément superposé

    $ ('# elementontop) .click (fonction (e) {
        $ ('# elementontop) .hide ();
        $ (document.elementFromPoint (e.clientX, e.clientY)). trigger ("clic");
        $ ('# elementontop'). show ();
    });


11
2018-02-20 20:04



J'avais besoin de faire cela et j'ai décidé de prendre cette route:

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

6
2017-07-11 19:29



Je travaille actuellement avec des ballons de discours sur toile. Mais parce que le ballon avec le pointeur est enveloppé dans un div, certains liens en dessous ne sont plus cliquables. Je ne peux pas utiliser extjs dans ce cas. Voir l'exemple de base pour mon didacticiel sur les bulles vocales  nécessite HTML5 

J'ai donc décidé de collecter toutes les coordonnées de lien à l'intérieur des ballons dans un tableau.

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

J'appelle cette fonction sur chaque (nouveau) ballon. Il saisit les coordonnées des coins gauche / haut et droite / bas d'un link.class - en plus l'attribut name pour ce qu'il faut faire si quelqu'un clique dans ces coordonnées et j'ai aimé mettre un 1 ce qui signifie qu'il n'a pas été cliqué sur jet . Et décalez ce tableau vers le clickarray. Vous pouvez utiliser pousser aussi.

Pour travailler avec ce tableau:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

Cette fonction permet de vérifier les coordonnées d'un événement de clic sur le corps ou s'il a déjà été cliqué et renvoie l'attribut de nom. Je pense qu'il n'est pas nécessaire d'aller plus loin, mais vous voyez que ce n'est pas si compliqué. Espérer dans était s'être ...


5
2018-01-09 13:36