Pertanyaan Klik melalui DIV ke elemen yang mendasarinya


Saya punya div yang memiliki background:transparent, bersama border. Di bawah ini div, Saya punya lebih banyak elemen.

Saat ini, saya dapat mengeklik elemen yang mendasari saat saya mengeklik di luar hamparan div. Namun, saya tidak dapat mengeklik elemen yang mendasari saat mengeklik langsung di hamparan div.

Saya ingin dapat mengklik ini div sehingga saya bisa klik pada elemen yang mendasarinya.

My Problem


1236
2017-09-09 20:42


asal


Jawaban:


Iya kamu BISA melakukan hal ini.

Menggunakan pointer-events: none bersama dengan pernyataan kondisional CSS untuk IE11 (tidak berfungsi di IE10 atau di bawah), Anda bisa mendapatkan solusi yang kompatibel lintas browser untuk masalah ini.

Menggunakan AlphaImageLoader, Anda bahkan bisa memasang transparan .PNG/.GIFs di overlay div dan klik mengalir ke elemen di bawahnya.

CSS:

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

IE11 bersyarat:

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

Ini dia halaman contoh dasar dengan semua kode.


2127
2018-01-29 21:49



Juga senang mengetahui ...
Anda dapat menonaktifkan penunjuk-peristiwa dalam elemen induk (mungkin div transparan) tetapi masih mengaktifkan elemen turunannya.
Ini berguna jika Anda bekerja dengan beberapa lapisan div yang tumpang tindih, di mana Anda ingin dapat mengeklik elemen anak, sementara lapisan induknya tidak bereaksi pada acara mouse sama sekali. Untuk ini semua div orangtua pointer-events: none dan anak-anak yang dapat diklik mendapatkan peristiwa pointer diaktifkan kembali oleh 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



Klik melalui DIV ke elemen yang mendasari bekerja berbeda di browser. Opera membutuhkan penerusan acara manual, Firefox, dan Chrome memahami CSS pointer-events:none; dan IE tidak membutuhkan apa pun dengan latar belakang transparan; dengan mis. background:white; opacity:0; filter:Alpha(opacity=0); IE membutuhkan penerusan seperti Opera.

Lihat meneruskan uji coba di http://jsfiddle.net/vovcat/wf25Q/1/ dan http://caniuse.com/pointer-events. Properti CSS Pointer-events telah dipindahkan dari CSS3-UI ke CSS4-UI.


37
2017-10-16 17:26



Saya menambahkan jawaban ini karena saya tidak melihatnya di sini sepenuhnya. Saya bisa melakukan ini menggunakan elementFromPoint. Jadi pada dasarnya:

  • lampirkan klik ke div yang ingin Anda klik
  • Sembunyikan itu
  • tentukan elemen penunjuk apa yang aktif
  • tembak klik pada elemen di sana.
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

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

Dalam kasus saya, overlaying div benar-benar diposisikan — saya tidak yakin apakah ini membuat perbedaan. Ini berfungsi pada IE8 / 9, Safari Chrome dan Firefox setidaknya.


16
2018-05-16 17:25



  1. Sembunyikan overlay elemen
  2. Tentukan koordinat kursor
  3. Dapatkan elemen pada koordinat tersebut
  4. Memicu klik pada elemen
  5. Tampilkan elemen overlay lagi

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


11
2018-02-20 20:04



Saya perlu melakukan ini dan memutuskan untuk mengambil rute ini:

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



Saat ini saya bekerja dengan balon pidato kanvas. Tetapi karena balon dengan penunjuk dibungkus dalam div, beberapa tautan di bawahnya tidak dapat diklik lagi. Saya tidak bisa menggunakan extjs dalam kasus ini. Lihat contoh dasar untuk tutorial balon pidato saya  membutuhkan HTML5 

Jadi saya memutuskan untuk mengumpulkan semua koordinat tautan dari dalam balon dalam susunan.

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

Saya menyebut fungsi ini pada setiap balon (baru). Ini mengambil koordinat dari kiri / atas dan kanan / bawah sudut dari link.class - tambahan atribut nama untuk apa yang harus dilakukan jika seseorang mengklik koordinat itu dan saya suka untuk mengatur 1 yang berarti bahwa itu tidak diklik jet . Dan lepaskan susunan ini ke clickarray. Anda bisa menggunakan push juga.

Untuk bekerja dengan array tersebut:

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

Fungsi ini membuktikan koordinat acara klik tubuh atau apakah sudah diklik dan mengembalikan atribut nama. Saya pikir itu tidak perlu untuk masuk lebih dalam, tetapi Anda melihatnya tidak terlalu rumit. Harapan dalam bahasa Inggris ...


5
2018-01-09 13:36