Frage Klicken Sie sich durch ein DIV zu den darunter liegenden Elementen


Ich habe ein div das hat background:transparent, zusammen mit border. Darunter divIch habe mehr Elemente.

Momentan kann ich auf die darunter liegenden Elemente klicken, wenn ich außerhalb des Overlays klicke div. Ich kann jedoch nicht auf die zugrunde liegenden Elemente klicken, wenn ich direkt auf das Overlay klicke div.

Ich möchte klicken können div damit ich auf die darunter liegenden Elemente klicken kann.

My Problem


1236
2017-09-09 20:42


Ursprung


Antworten:


Ja du KANN mach das.

Verwenden pointer-events: none zusammen mit CSS bedingten Anweisungen für IE11 (funktioniert nicht in IE10 oder darunter), können Sie eine Cross-Browser-kompatible Lösung für dieses Problem erhalten.

Verwenden AlphaImageLoaderSie können sogar transparent setzen .PNG/.GIFs in der Überlagerung div und haben Klicks zu Elementen darunter fließen.

CSS:

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

IE11 bedingt:

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

Hier ist ein grundlegende Beispielseite mit dem ganzen Code.


2127
2018-01-29 21:49



Auch schön zu wissen ...
Sie können Zeiger-Ereignisse in einem übergeordneten Element (wahrscheinlich transparentes div) deaktivieren, aber es für seine untergeordneten Elemente noch aktiviert.
Dies ist hilfreich, wenn Sie mit mehreren überlappenden Div-Ebenen arbeiten, in denen Sie auf untergeordnete Elemente klicken können, während die übergeordneten Ebenen überhaupt nicht auf Mausereignisse reagieren. Dafür bekommen alle Erziehungsdivs pointer-events: none und seine klickbaren Kinder erhalten Zeiger-Ereignisse, die wieder aktiviert werden können 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



Klicken Sie sich durch ein DIV zu zugrunde liegenden Element arbeitet in Browsern anders. Opera benötigt manuelle Ereignisweiterleitung, Firefox und Chrome verstehen CSS pointer-events:none; und IE braucht nichts mit transparentem Hintergrund; mit z.B. background:white; opacity:0; filter:Alpha(opacity=0); IE benötigt eine Weiterleitung wie Opera.

Siehe Weiterleitungstest bei http://jsfiddle.net/vovcat/wf25Q/1/ und http://caniuse.com/pointer-events. Die CSS-Eigenschaft Pointer-Events wurde von CSS3-UI in CSS4-UI verschoben.


37
2017-10-16 17:26



Ich füge diese Antwort hinzu, weil ich sie hier nicht vollständig gesehen habe. Ich konnte dies mit elementFromPoint tun. Also im Grunde genommen:

  • Fügen Sie einen Klick zum div hinzu, auf dem Sie klicken möchten
  • Verstecke es
  • Bestimmen Sie, auf welchem ​​Element sich der Zeiger befindet
  • feuern Sie den Klick auf das Element dort.
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

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

In meinem Fall ist das überlagernde Div absolut positioniert - ich bin mir nicht sicher, ob das einen Unterschied macht. Dies funktioniert bei IE8 / 9, Safari Chrome und Firefox mindestens.


16
2018-05-16 17:25



  1. Überlagere das Element
  2. Bestimmen Sie die Cursorkoordinaten
  3. Holen Sie sich ein Element für diese Koordinaten
  4. Auslöser klicken auf Element
  5. Überlagerndes Element erneut anzeigen

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


11
2018-02-20 20:04



Ich musste dies tun und entschied mich für diesen Weg:

$('.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



Ich arbeite derzeit mit Leinwand Sprechblasen. Da der Ballon mit dem Zeiger jedoch in ein Div eingepackt ist, sind einige Links darunter nicht mehr klickbar. Ich kann extjs in diesem Fall nicht verwenden. Siehe grundlegendes Beispiel für mein Sprachballon-Tutorial  erfordert HTML5 

Also beschloss ich, alle Link-Koordinaten aus den Ballons in einem Array zu sammeln.

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

Ich rufe diese Funktion bei jedem (neuen) Ballon auf. Es ergreift die Koordinaten der linken / oberen und rechten / unteren Ecken einer link.class - zusätzlich das name-Attribut für was zu tun, wenn jemand in diese Koordinaten klickt und ich liebte es, eine 1 zu setzen, was bedeutet, dass es nicht Jet-Klick wurde . Und verschiebe dieses Array zum clickarray. Du könntest auch drücken.

Um mit diesem Array zu arbeiten:

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

Diese Funktion prüft die Koordinaten eines Body-Click-Ereignisses oder ob bereits geklickt wurde und gibt das name-Attribut zurück. Ich denke, es ist nicht notwendig, tiefer zu gehen, aber Sie sehen, es ist nicht so kompliziert. Die Hoffnung war sehr ...


5
2018-01-09 13:36



es funktioniert nicht so. Die Aufgabe besteht darin, die Koordinaten des Mausklicks manuell auf die von jedem Element belegte Fläche zu überprüfen.

Die von einem Element belegte Fläche kann gefunden werden, indem 1. der Ort des Elements in Bezug auf die obere linke Seite der Seite ermittelt wird und 2. die Breite und Höhe. Eine Bibliothek wie jQuery macht dies ziemlich einfach, obwohl es in einfachen js gemacht werden kann. Hinzufügen eines Ereignishandlers für mousemove auf der document Objekt stellt fortlaufende Aktualisierungen der Mausposition von oben und von links der Seite bereit. Die Entscheidung, ob sich die Maus über einem gegebenen Objekt befindet, besteht darin, zu prüfen, ob sich die Mausposition zwischen der linken, rechten, oberen und unteren Kante eines Elements befindet.


4
2017-09-09 20:45



Eine andere Idee (situationsbedingt) wäre:

  1. Setzen Sie den gewünschten Inhalt in ein div;
  2. Setzen Sie das nicht-klickende Overlay über die gesamte Seite mit einem höheren Z-Index,
  3. mache eine weitere beschnittene Kopie des ursprünglichen div
  4. Overlay und ABS positionieren das Copy Div an der gleichen Stelle wie der ursprüngliche Inhalt, an dem Sie mit einem noch höheren Z-Index klickbar sein möchten?

Irgendwelche Gedanken?


3
2018-02-26 22:32



Nein, Sie können nicht durch ein Element klicken. Sie können die Koordinaten des Klicks ermitteln und herausfinden, welches Element sich unterhalb des angeklickten Elements befand. Dies ist jedoch für Browser, die dies nicht tun, sehr mühsam document.elementFromPoint. Dann müssen Sie immer noch die Standardaktion des Klickens emulieren, was nicht unbedingt trivial ist, abhängig davon, welche Elemente Sie unter dort haben.

Da Sie eine vollständig transparente Fensterfläche haben, werden Sie wahrscheinlich besser daran arbeiten, sie als separate Randelemente um die Außenseite herum zu implementieren, so dass der mittlere Bereich frei von Hindernissen bleibt, so dass Sie wirklich einfach gerade hindurchklicken können.


2
2017-09-09 21:27