Olay yayılmasını önleyen Yığılmış Eleman

Question

svg öğelerini kullanarak bir grafik oluşturuyorum. Olay işleyicilerini onlara uygulıyorum. Olaylar istediği gibi çalışır, ancak bir sorunum var, çünkü bazen öğelerden biri doğrudan diğerinin üstünde, bu yüzden altta bulunan elemanın olayının tetiklenmesi gerektiği varsayılmıyor. Aşağıdaki resme bakarsanız, zoom etkinliğiyle bir rect sahibim. Zoom event, mouse-wheelrect'da gerçekleştiğinde tetiklenir, ancak daire kapladığı zaman, olay tetiklenmez. rect'un üst kısmında bulunan circles ürününe ihtiyacım var, böylece gerektiğinde tıklanabilirler. Bu sorunu nasıl aşabilirim? SO numaralı telefondan çözüm aramayı denedim, ancak bu konuya özel bir şey bulamadım.

Çevreleri gösteren bir JSFiddle sahibim. Çevrelerin yanı sıra başka bir yere de zoom yaparsanız, yakınlaştırma davranışı tetiklenir, ancak çevrelerin üstünü yakınlaştırmaya çalışırsanız, yakınlaştırma davranışı çalışmaz.

Answer 1

Sen

circle.selected { 
    pointer-events:none; 
} 

eklemek ve yardımcı olmadığını görebilirsiniz.

GÜNCELLEME: Sadece pointer-events'un devre dışı bırakılmasının OP'nin yorumlarıyla giden bir seçenek olmadığını fark ettim. Bu durumda, seçilen dairedeki olayın bir fare tekerleği yakınlaştırma olayı olup olmadığını kontrol etmek ve eğer öyleyse, seçilen daireye bir disable-zoom css sınıfı eklemek yönergesine sahip .disable-zoom sınıfı için css ile çalışabilir.

Bunun bir d3js bağlamda size yardımcı olur emin değilim

Answer 2

, ama ...

Normal JS ile sadece çevrelerinde tekerlek olayları yakalamak ve sadece rect olay işleyicisi diyebiliriz.

Demo: (şekillerin üzerinde tıklama ve fare hareketi yapmayı deneyin).

$("rect").on('wheel', rectWheel); 
 
$("circle").on('wheel', circleWheel); 
 
$("circle").on('click', circleClick); 
 

 
function rectWheel(evt) { 
 
    out("rect zoom"); 
 
} 
 

 
function circleWheel(evt) { 
 
    rectWheel(evt); 
 
} 
 

 
function circleClick(evt) { 
 
    out("circle click"); 
 
} 
 

 
function out(text) { 
 
    var $out = $("#out"); 
 
    $out.text($out.text() + text + '\n'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <rect id="back" width="150" height="150" fill="red"/> 
 
    <circle id="front" cx="100" cy="100" r="20" fill="green"/> 
 
</svg> 
 

 
<pre id="out"> 
 
</pre>