Alttaki öğelere div üzerinden tıklayın

Bir var divolduğunu background:transparentbirlikte border. Bunun altında divdaha fazla elementim var.

Şu anda, yer paylaşımının dışını tıkladığımda temel öğeleri tıklayabiliyorum div. Ancak, doğrudan yer paylaşımını tıklarken temel öğeleri tıklayamıyorum div.

Bu tıklama yoluyla mümkün istiyorum divben altta yatan unsurların tıklayabilir böylece.

Evet, CAN bunu.

pointer-events: noneIE11 için CSS koşullu ifadeleriyle birlikte kullanıldığında (IE10 veya altında çalışmaz), bu sorun için çapraz tarayıcı uyumlu bir çözüm alabilirsiniz.

Kullanarak AlphaImageLoader, .PNG/.GIFbindirmeye saydam s koyabilir divve altındaki öğelere tıklamaların geçmesini sağlayabilirsiniz.

CSS:

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

IE11 şartlı:

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

İşte tüm kodu içeren temel bir örnek sayfa .

Ayrıca bilmek güzel ...
Bir üst öğede (muhtemelen saydam div) işaretçi olaylarını devre dışı bırakabilirsiniz, ancak alt öğeleri için hala etkin olmasını sağlayabilirsiniz.
Üst katmanların hiçbir fare olayına tepki vermemesini sağlarken alt öğeleri tıklatmak istediğiniz üst üste binen div katmanlarıyla çalışıyorsanız bu yararlı olur.

Bunun için tüm ebeveynlik divleri alır pointer-events: noneve tıklanabilir çocukları,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>

Kullanıcının bir divöğeyi temel öğeye tıklamasına izin vermek tarayıcıya bağlıdır. Firefox, Chrome, Safari ve Opera dahil olmak üzere tüm modern tarayıcılar anlıyor pointer-events:none.

IE için, arka plana bağlıdır. Arka plan şeffafsa, tıklama hiçbir şey yapmanıza gerek kalmadan çalışır. Öte yandan, background:white; opacity:0; filter:Alpha(opacity=0);IE gibi bir şey için manuel olay yönlendirme gerekir.

Bkz Bir JSFiddle testi ve CanIUse hadiseleri .

Bu yanıtı ekliyorum çünkü burada tam olarak görmedim. ElementFromPoint kullanarak bunu yapabildim. Temel olarak:

• tıklanmak istediğiniz div'e bir tıklama ekleyin
• sakla
• işaretçinin hangi öğede olduğunu belirleme
• oradaki öğeye tıklayın.

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

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

Benim durumumda bindirme div kesinlikle konumlandırılmış - Bunun bir fark yaratıp yaratmadığından emin değilim. Bu en azından IE8 / 9, Safari Chrome ve Firefox'ta çalışır.

1. Öğeyi bindirmeyi gizle
2. İmleç koordinatlarını belirleme
3. Bu koordinatlarda eleman alın
4. Tetikleyici tıklama öğesi
5. Katman öğesini tekrar göster

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

Bunu yapmam gerekiyordu ve bu rotayı almaya karar verdim:

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

Şu anda tuval konuşma balonları ile çalışıyorum. Ancak işaretçiye sahip balon bir div içine sarıldığından, altındaki bazı bağlantılar artık tıklanamaz. Bu durumda extjs kullanamıyorum. Konuşma balonu öğreticimin temel örneğini görmek için HTML5 gerekiyor

Bu yüzden bir dizideki balonların içinden tüm bağlantı koordinatlarını toplamaya karar verdim.

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

Bu işlevi her (yeni) balonda adlandırıyorum. Bir bağlantının sol / üst ve sağ / aşağı köşelerinin koordinatlarını alır. Buna ek olarak, birisi bu koordinatlara tıklarsa ve bir 1 ayarlamayı sevdiğimde, jet tıklanmadığı anlamına gelir. . Ve bu diziyi tıklama dizisine kaydırın. Push'u da kullanabilirsiniz.

Bu diziyle çalışmak için:

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

Bu işlev, bir gövde tıklaması etkinliğinin koordinatlarını veya önceden tıklanmış olup olmadığını kanıtlar ve name özniteliğini döndürür. Bence daha derine inmek gerekli değil ama görüyorsunuz o kadar da karmaşık değil. Umut inlish oldu ...

bu şekilde çalışmaz. geçici çözüm, her bir öğenin kapladığı alana göre fare tıklatmasının koordinatlarını el ile denetlemektir.

bir elemanın kapladığı alan, 1. sayfanın sol üst kısmına göre elemanın yerini ve 2. genişlik ve yüksekliği bulmak suretiyle bulunabilir. jQuery gibi bir kütüphane bunu oldukça basit kılar, ancak düz j'lerde yapılabilir. için bir olay işleyicisi ekleyerek mousemoveüzerinde documentnesnenin üstünden fare pozisyonunun sürekli güncellemelerini sağlamak ve sayfanın sol olacaktır. farenin herhangi bir nesnenin üzerinde olup olmadığına karar vermek, fare konumunun bir öğenin sol, sağ, üst ve alt kenarları arasında olup olmadığını kontrol etmekten ibarettir.

Hayır, bir öğeyi 'tıklatamazsınız'. Tıklamanın koordinatlarını alabilir ve tıklanan öğenin altında hangi öğenin olduğunu bulmaya çalışabilirsiniz, ancak bu, sahip olmayan tarayıcılar için gerçekten sıkıcıdır document.elementFromPoint. Ardından, tıklamanın varsayılan eylemini taklit etmeniz gerekir; bu, altında hangi öğelere sahip olduğunuza bağlı olarak önemsiz değildir.

Tamamen şeffaf bir pencere alanınız olduğundan, muhtemelen dışarıda ayrı bir sınır öğesi olarak uygulamaktan daha iyi olacaksınız ve merkez alanını tıkanıklıktan uzak bırakarak gerçekten doğrudan tıklayabilirsiniz.

Denemek için başka bir fikir (durumsal olarak):

1. İstediğiniz içeriği bir div içine koyun;
2. Tıklama içermeyen kaplamayı z-endeksi daha yüksek olacak şekilde sayfanın tamamına yerleştirin,
3. orijinal div'in kırpılmış başka bir kopyasını yap
4. yer paylaşımı ve abs, kopya div'ini daha da yüksek bir Z-endeksiyle tıklanabilir olmasını istediğiniz orijinal içerikle aynı yere yerleştiriyor mu?

Düşüncesi olan var mı?

İşaretlemenizi değiştirmeyi düşünebileceğinizi düşünüyorum. Yanılmıyorsam, belgenin üzerine görünmez bir katman koymak istersiniz ve görünmez işaretlemeniz belge görüntünüzden önce gelebilir (bu doğru mu?).

Bunun yerine, görünmezi belge görüntüsünün hemen arkasına koymanızı, ancak konumu mutlak olarak değiştirmenizi öneririm.

Position: relative için bir üst öğeye ihtiyacınız olduğuna dikkat edin ve sonra bu fikri kullanabilirsiniz. Aksi takdirde, mutlak katmanınız sol üst köşeye yerleştirilir.

Mutlak bir konum elemanı, statik dışında bir konuma sahip olan birinci ana elemana göre konumlandırılır. Böyle bir öğe bulunmazsa, içeren blok html'dir

Bu yardımcı olur umarım. CSS konumlandırma hakkında daha fazla bilgi için buraya bakın .

aEtiketi tüm HTML özütünün etrafına sarın , örneğin

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

benim örneğimde, altyazı sınıfım işaretçi olayları ile vurgulanan efektlere sahiptir : none; sadece kaybedeceksin

içeriği kaydırmak vurgulu efektlerinizi koruyacak ve tüm resimlerde, div dahil, ilgili tıklayabilirsiniz !

AP kaplaması gibi ...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

sadece istemediğiniz yere koyun yani. Hepsi çalışıyor.

Daha kolay bir yol, Veri URI'lerini kullanarak saydam arka plan görüntüsünü satır içine almak olacaktır:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

event.stopPropagation();Burada da belirtilmesi gerektiğini düşünüyorum . Bunu düğmenizin Tıklama işlevine ekleyin.

Etkinliğin DOM ağacını köpürmesini önleyerek üst işleyicilerin olay hakkında bilgilendirilmesini önler.

Bu soru için kesin bir cevap değildir, ancak bunun için bir çözüm bulmanıza yardımcı olabilir.

AJAX çağrısında beklerken görüntülenen ve sonra tekrar saklandığımda görüntülenen ve görüntülediğim bir resim vardı ...

Sayfayı yüklerken görüntümü göstermenin tek yolunu buldum, sonra görüntüyü bir DIV'ye koymak, DIV 10x10 piksel veya daha küçük yapmak için gizlenmeden önce görüntünün bulunduğu yerlere tıklayabilir ve tıklayabilirsiniz. bir soruna neden olacak ve daha sonra içeren div'ı gizleyecek kadar yeterli. Bu, görüntünün görünür durumdayken div öğesinin taşmasına izin verdi ve div gizlendiğinde, yalnızca div alanı, DIV'nin içerdiği ve görüntülediği görüntünün tüm boyutundan değil, altındaki nesneleri tıklayamama durumundan etkilendi.

Gizli = true ile görüntüyü gizleme CSS display = none / block, opacity = 0 dahil olmak üzere görüntüyü gizlemek için tüm yöntemleri denedim. Hepsi görüntümün gizlenmesine neden oldu, ancak altındaki şeylerin üzerinde bir kapak olduğu gibi görüntülenen alan, bu yüzden tıklamalar vb. Altta yatan nesneler üzerinde hareket etmeyecekti. Görüntü küçük bir DIV'nin içine girdiğinde ve küçük DIV'yi gizledikten sonra, görüntünün kapladığı tüm alan netti ve sakladığım DIV'nin altındaki küçük alan etkilendi, ancak yeterince küçük yaptığım için (10x10 piksel), sorun düzeltildi (bir çeşit).

Bu basit bir sorun ne için kirli bir çözüm olarak buldum ama bir kapsayıcı olmadan nesneyi kendi yerel biçiminde gizlemek için herhangi bir yol bulamadı. Nesnem vb. Şeklindeydi. Eğer daha iyi bir yolu varsa, lütfen bana bildirin.