başka bir elemanın altındaki bir öğeye yapılan tıklamaları kaydeder

Tıklayabileceğim donukluğa sahip bir elemanın altında bulunan elemanlar var: 0.5. En üstteki elemanı "nasıl" tıklayabilirim?başka bir elemanın altındaki bir öğeye yapılan tıklamaları kaydeder

Sorunumu gösteren bir örnek. Onları açmak ve kapatmak için kutulara tıklayın. Çözümünüzü denemek için on jsbin düzenleyebilirsiniz.

Kutuların üzerine geldikten sonra bonus puanları arasında geçiş yapabilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #000; } 
.box {width: 50px; height: 50px; border: 1px solid white} 
.highlight {background-color: yellow;} 
</style> 
<script type="text/javascript"> 
var dthen = new Date(); 
$('<div id="past">').css({'height': (dthen.getMinutes()*60)+dthen.getSeconds() +'px' 
      ,'position': 'absolute' 
      ,'width': '200px' 
      ,'top': '0px' 
      ,'background-color': 'grey' 
      ,'opacity': '0.5' 
      }) 
     .appendTo("#container"); 

setInterval(function(){ 
    dNow = new Date(); 
    $('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px'); 
},10) 

$(".box").click(function(){ 
     $(this).toggleClass("highlight"); 
    }); 
</script> 
</head> 
<body> 
    <div id="container"> 
    <div class="box" style="position:absolute; top: 25px; left: 25px;"></div> 
    <div class="box" style="position:absolute; top: 50px; left: 125px;"></div> 
    <div class="box" style="position:absolute; top: 100px; left: 25px;"></div> 
    <div class="box" style="position:absolute; top: 125px; left: 125px;"></div> 
    <div class="box" style="position:absolute; top: 225px; left: 25px;"></div> 
    <div class="box" style="position:absolute; top: 185px; left: 125px;"></div> 
    </div> 
</body> 
</html>

kaynak

2009-07-18 Sam Hasler

Sanırım sizin için tam bir çözüm yazmamız için buradayız. Aşağıda verilen önerileri kullanarak çözümü kendiniz uygulamalısınız. SO ücretsiz bir danışmanlık dükkanı değildir. –

Bunu yapmak isteyecek tek kişi olduğuma inanamıyorum. Bu yüzden, bunun nasıl yapılacağını gösteren herhangi bir kod, bunun için planladığımın ötesinde bir kullanım bulacağını düşünüyorum. Bunu yapmak için kod istemekte herhangi bir sorun görmüyorum. –

sam, ayrıca .css – redsquare

TAMAM sözdizimi hatası özgür olamazdı, bu yüzden yapacağını düşünüyorum 2 şey vardır: (1) bir CSS3 cevap, değil mi Ancak yaygın olarak kabul edilmiş ve (2) geri kalanı için bir Javascript yedekleme planı. (JS olmayan kullanıcıların, CSS bölümünü desteklemeyen eski tarayıcılarda ne yaptıklarından emin değil).

İlk ... Okumaya: fare etkileşimine üst eleman 'görünmez' hale getirmek için bu CSS3 kodu kullanın:

pointer-events: none;

Bu çapraz tarayıcı uyumlu henüz değil. Yalnızca Gecko & Webkit tarayıcılarındaki SVG & HTML Öğeleri üzerinde çalışır, ancak yalnızca Opera'daki SVG öğelerinde çalışır ve IE'de hiç yoktur. MDN'yi Başına

CSS özelliği işaretçi-olaylar bir eleman fare olayın hedefi olabilir olsun veya ne zaman kontrol etmek yazarları tanır. Bu özellik için kullanılır. Hangi durumlarda ( olursa olsun) bir fare olayının bir elemanın "içinden" "gitmesi" gerektiğini ve bu elemanın "altında" "altında" olduğunu belirtin.

İşte o belgeler var: İkinci https://developer.mozilla.org/en/css/pointer-events

: Kullan bazı javascript Özellik Tespiti Henüz bu CSS desteklemeyen bu tarayıcılar için. Bunu henüz test etmediğinden (bilgim için), Modernizr'a benzer bir şekilde kendi hesabınızı kullanmanız gerekecek. Buradaki fikir, bir eleman yaratmanız, işaretçi-olayları CSS'ye uygulamanız, kontrol etmeniz ve tarayıcının özelliği desteklemesi durumunda, null ya da undefined olmayan bir şeyin aksine beklenen sonucu elde etmenizdir; sonra öğeyi yok et. Her neyse, bir kez özellik tespiti yaptıktan sonra, jQuery'yi veya benzerlerini en üstteki öğeye bir dinleyici eklemek için kullanabilir ve başka bir şeye tıklamak için ondan bir tıklama atayabilirsiniz. JQuery'ye göz atın ve daha fazla bilgi için link() işlevini kullanın (bağlantıyı göndermek için yeterli sayı yok, sry).

Daha sonra zaman alırsam, hızlı bir jsFiddle üzerinde çalışabilirim. Umarım bu yardımcı olur.

Ben jquery işlevi içine yukarıdan kodunu değiştirmiş

kaynak

2011-04-29 19:29:25 Lelando

Bu işe yarıyor! [Nokta-olayları] (http://jsbin.com/limesat/edit?html.css,js, çıkış) çözümünü [orijinal çözüm] ile karşılaştırın (http://jsbin.com/pefop/edit?html, cSS, jS, çıkışı). Tabii ki 2009'da bunu ilk kez sorduğumda işaretçi-olayları yoktu. [IE11 pointer-olayları destekleyen ilk versiyondu] (http://caniuse.com/#search=pointer-events) ve bu çıktı 2013. –

IE10 veya altını desteklemeniz gerekiyorsa, Modernizr artık CSS İşaretçisi Olayları –

için bir sınamanın varlığına sahip görünüyor. Bu ayrıca, vurgulu sorunu çözer. Stilleri sadece .box: hover'e ekleyebilirsiniz ve #past öğesi altında hala tetiklenecektir. –

Eğer üstteki eleman aşağıda elementi içinde yer alır ise, "içinden balonu" olayı sağlayabilirsiniz. Değilse, tıklamayı manuel olarak tetiklemeniz gerekir. Olay işleyicisini yalnızca tıklayarak tıklamanın hiçbir yolu yoktur.

elle olayı için, bu yapabilirdi:

$("#topelement").click(function() { 
    $("#elementbelow").click(); 
    return false; 
});

EDIT (yorumlar için yanıtı):

tüm kutuları numaralandırmak için, tepesinden bu (yapabileceği benim . baş test yapmadan bile)

$("#topelement").click(function(e) { 
    $(".box").each(function() { 
     // check if clicked point (taken from event) is inside element 
     var mouseX = e.pageX; 
     var mouseY = e.pageY; 
     var offset = $(this).offset; 
     var width = $(this).width(); 
     var height = $(this).height(); 

     if (mouseX > offset.left && mouseX < offset.left+width 
      && mouseY > offset.top && mouseY < offset.top+height) 
     $(this).click(); // force click event 
    }); 
});

kaynak

2009-07-18 19:59:19

kullanarak tüm bu ayarlardan ziyade addClass kullanın. Tıklatılan noktanın bir veya daha fazla öğenin içinde olup olmadığını görmek için tüm DOM öğelerini numaralandırmanız gerekir. Tarayıcının bunu sizin için yapabileceği bir yol yoktur –

Bu işe yaradığı için teşekkürler: http://jsbin.com/pefop/edit –

, birilerini yarayabilecek:

bul alternatif tıklandığında açma elemanları:

$('.child').click(function(e) { 
    $(this).siblingsUnderMouse(e).each(fn); 
});

Eğer görüntülerde saydam pikselleri görmezden isterseniz:

$('.child').click(function(e) { 
    $(this).siblingsUnderMouse(e).each(function() { 
     var clickOnVisiblePixel = $(this).isOnVisiblePixel(e); 
    }); 
});

Kodu:

$.fn.reverse = [].reverse; 
$.fn.siblingsUnderMouse = function(e, filter) 
{ 
    filter = filter || '*'; 

    var arr = $(); 
    this.parent().children().filter(filter).reverse().each(function() 
    { 
     var t = $(this); 
     // check if clicked point (taken from event) is inside element 
     var x = (e.pageX - t.offset().left).toFixed(); 
     var y = (e.pageY - t.offset().top).toFixed(); 
     var w = t.width(); 
     var h = t.height(); 

     if (x < 0 || x >= w || y < 0 || y >= h) 
      return; 

     arr.push(t); 
    }); 
    return arr; 
} 

$.fn.isOnVisiblePixel = function(e) 
{ 
    if (e.type == 'mouseleave') return false; 

    var t = this[0]; 
    if (!t || t.tagName != 'IMG') 
     t = this.find('img')[0]; 
    if (!t) return; 

    var w = $(t).width(); 
    var h = $(t).height(); 
    var o = $(t).offset(); 
    var x = (e.pageX - o.left).toFixed(); 
    var y = (e.pageY - o.top).toFixed(); 
    if (x < 0 || y < 0 || x >= w || y >= h) 
     return false; 

    var c = $('<canvas>')[0]; 
    c.width = w; 
    c.height = h; 

    var ctx = c.getContext('2d'); 
    ctx.drawImage(t, 0, 0, w, h); 

    var a = ctx.getImageData(x, y, 1, 1).data[3]; 
    return (a > 128); 
}

kaynak

2012-11-16 23:46:28

Bence Lelando doğru vuruşla karşılaşır. Benim durumumda sadece css kullanarak çözdüm ve işaretçi-olaylarını ekleyebilirsiniz: yok#past elemanına.

kaynak

2017-08-30 16:19:09 Martino

başka bir elemanın altındaki bir öğeye yapılan tıklamaları kaydeder

cevap

İlgili konular