Hangi öğeye tıklandı?

Aşağıdaki gibi html’mde basit bir div var:

<div id="myDiv">
....

</div>

Ayrıca, window.click üzerindeki onlick olayını aşağıdaki gibi ayarladım:

window.onclick = function()
{
   //do something
 }  

So if I click, anywhere in the div, how can I find that this click was made inside "myDiv"

Not: Div'ime click olayını ekleyemiyorum, jqgrid'den rastgele oluşturulur

4
Bunu jQuery olarak etiketlediğiniz gibi, @ory McCrossan'ın çözümü doğru olanıdır. Dinamik olarak eklenen içerik için, değişmeyen bir ata öğesine eklenmiş bir temsil edilen olay işleyicisi kullanın ( belge en güvenli varsayılandır). @Erkaner tarafından verilen cevap en iyi çözüme en yakın olanıdır (sadece aşağıdaki yoruma göre biraz ince ayarlanması gerekir). Pencerenin tek-tek onclick özelliğini kullanmak da kötü bir fikir!
katma yazar Gone Coding, kaynak
@RoryMcCrossan: Yorumunuz için teşekkür ederiz. Soruma not ekledim, lütfen kontrol edin :-)
katma yazar Sashi Kant, kaynak
Bu durumda, div: $ ('# container').
katma yazar Rory McCrossan, kaynak
Neden bir tıklama işleyicisini doğrudan #myDiv öğesine iliştirmiyorsunuz?
katma yazar Rory McCrossan, kaynak
event.target ... yardımcı olur mu?
katma yazar Kalish, kaynak

8 cevap

$(document).on("click","#myDiv", function (event) {
     alert(event.target.id);
});
5
katma
@Sashi Kant: Yanlış. Bu cevabı tam olarak açıklayan daha ayrıntılı bir cevap ekliyorum. Birkaç dakika bekle.
katma yazar Gone Coding, kaynak
Bu bir jQuery sorusu olduğu için, bu en uygun cevap olacaktır. Temsil edilen olayların nasıl çalıştığını açıklamalı, bu cevabın indirimden kaçınmasını önlemek için. Ayrıca, temsilci işleyicisi için uygun hedef seçiminden de söz edin (dinamik öğenin değişmeyen en yakın atası, belge varsayılandır).
katma yazar Gone Coding, kaynak
@Sashi Kant: Söz verildiği gibi açıklama eklendi. Eğer gerçek HTML kodunuzu sağlayabilirseniz, sahip olabileceğiniz her türlü ihtiyacı karşılayacak şekilde değiştirebilirim. Temsilci olay işleyicisi düzgün kullanıldığında harika :)
katma yazar Gone Coding, kaynak
@TrueBlueAussie: Çok hoş olacak :)
katma yazar Sashi Kant, kaynak
@TrueBlueAussie Yanıtınız için teşekkürler, ama burada myDiv 'in javascript'ten çoklu noktalardan üretildiği bir sorun var ( mydiv adı bir örnekti). Bu durumda, bu kodun çalışacağını sanmıyorum, bu satır çalıştırıldıktan sonra div oluşturulur.
katma yazar Sashi Kant, kaynak
alert (this.id); biraz daha kısa.
katma yazar Regent, kaynak

Bunu, cevabını aşağı oylama ile ilgili olarak @Nishit Maheta ile bir tartışmaya açıklık getirmek için ekliyorum.

Sorunun amacı basitçe şudur. "Dinamik olarak eklenen bir div tıklandığında bilmek istiyorum". Dinamik olarak eklendiğini gördüğünüz an, temsil edilen etkinlikleri düşünüyorum! :)

Bu soru jQuery'ye izin verdiğinden, @ erkaner bu durum için idealdir. Sadece bunun neden uygun bir çözüm olduğunu açıklamak istiyorum.

$(document).on("click","#myDiv", function (event) {
    //Do something
});

Açıklama:

  • Bu, bir jQuery yetkilendirilmiş olay işleyicisi kullanır . Olay işleme, amaçlanan hedefin değişmeyen atalarına, yani adlarına "delege edilir".
  • Seçilen ata, bu durumda belge 'dir.
  • Hedefe en yakın değişmeyen atayı kullanmalısınız, ancak başka hiçbir şey daha yakın/uygun değilse, belge en iyi varsayılandır.
  • Uyarı: Yetkilendirilmiş olaylar için bir hata olduğundan, body 'u kullanmayın (stil, kabarık fare olaylarının oluşmamasına neden olabilir).
  • Etkinlik (bu durumda tıklayın ), işleyici öğeye (örneğin, belge) kadar kabarcıklar.
  • jQuery seçicisi (bu durumda #myDiv ) daha sonra yalnızca kabarcık zincirindeki öğelere uygulanır. Bu çok verimli.
  • Sağlanan işleyici işlevi daha sonra, yalnızca etkinliğe neden olan eşleşen öğelere uygulanır .

Tüm bunların bir sonucu olarak, öğesinin etkinlik saatine kadar varolması gerekmiyor ( etkinliğin kaydedildiği zaman varolması gerekmez ).

Ayrıca, delegasyon tipik olarak fare olaylarında kullanıldığından (ve saniyede 50.000 kez değil), bununla "ham" olay işleyicisi arasındaki herhangi bir hız farkı ihmal edilebilir. Avantajları, önemsiz hız farklarından daha ağır basar.

Diğer onclick = cevaplarıyla ilgili olarak

  • Öncelikle, tek window.onclick özelliğini kullanmak, başka bir şeyi kullanmayı durdurduğunuzda kötü bir fikirdir (jQuery kullananların kullanması gerekmiyor).
  • İkincisi, onclick 'a iletilen olay parametresi tüm tarayıcılar tarafından sağlanmaz (bu, onu kullanmayı kimsenin durdurması için yeterli olmalıdır). Geçici çözümler var, ancak tarayıcı geçici çözümlerini önlemek için jQuery oluşturuldu :)

Notlar:

If the naming is not under your control, you just need something to match on. Worst case, it could be as simple as "match any div under any table", but that will depend on your specific HTML & code:

$(document).on("click","table div", function (event) {
    //Do something
});

İşte pratik bir örnek:

http://jsfiddle.net/TrueBlueAussie/eyo5Lnsy/

@Sashi Kant: Sayfanızın bir örneğini HTML çıktısı sağlayabilirseniz (ör. Tarayıcıdan kaydedilmiş) Bunu ortaya koymak istediğiniz herhangi bir varyasyonu karşılamak için mutlu olacağım

3
katma
@Sashi Kant: Bu tekniğin çalışması için ayrıca # grid0 üzerinde bir işleyici bulundurmanız gerekir. Yorumlar yeterince iyi olmadığı için lütfen yeni bir soru sorun :)
katma yazar Gone Coding, kaynak
@Sashi Kant: Bu kısaltılabilir (işleyicileri zincirleyebilir), ancak yardımcı olmalı: jsfiddle.net/TrueBlueAussie/eyo5Lnsy/1 Bunlar olmadan neler olacağını görmek için stopPropagation 'ı kaldırın! :)
katma yazar Gone Coding, kaynak
@Sashi Kant: Bunun küçük bir parça karmaşık olduğu şeklinde bir örnek ekleyeceğim :)
katma yazar Gone Coding, kaynak
@Sashi Kant: Yardımcı olmasına sevindim. jQuery delegasyonu yapılan etkinliklerin, birçok problem için mükemmel bir çözüm olduğu için nasıl çalıştığını anlamak çok önemlidir (eğer doğru kullanılırsa) :)
katma yazar Gone Coding, kaynak
Aslında event.stopPropagation() , belgenin geri kalanında sahip olduğumuzdan farklı olan myDiv 'ın onclick olayını durdurur.
katma yazar Sashi Kant, kaynak
katma yazar Sashi Kant, kaynak
Çabalarını takdir ediyorum :)
katma yazar Sashi Kant, kaynak
Ve son bir soru, ya bir şey yapmak istersem, sayfadaki herhangi bir yerde myDiv
katma yazar Sashi Kant, kaynak
# grid0 'da bulunan bir satıra tıkladığımda, eğer üzerine tıklarsam, $ (document) .on içindeki kod ("klik", ": değil (" # grid0 ") ', function (event) {event.stopPropagation (); console.log (' logger 1: '+ jQuery (' # grid0, # ui-datepicker-div '). find (event.target) .length); refreshMyDyna ( ); outerLastSel = -1;}); yürütülür
katma yazar Sashi Kant, kaynak
Çok önemli şüphelerimi çözdünüz, çok teşekkürler :)
katma yazar Sashi Kant, kaynak
Mükemmel kapsamlı açıklama
katma yazar Asta, kaynak

Etkinliği işlevden alın: window.onclick = function (event) , işlev içinde event.target olarak kullanabilirsiniz:

window.onclick = function(event)
{
    alert(event.target);
}
3
katma
Bunu yapmak için tek ve sadece window.onclick özelliğini sıralamak kötü bir fikirdir. Uygun bir jQuery çözümü (etiketlendiği gibi) bir temsilci olayı işleyicisi olacaktır (bkz. @ Erkaner'in cevabı).
katma yazar Gone Coding, kaynak
Harika, aradığım şey bu ... :-)
katma yazar Sashi Kant, kaynak
Bildiğim kadarıyla, olay her zaman tüm tarayıcılar tarafından bir parametre olarak geçirilmez. event.target ayrıca eski IE sürümlerinde de mevcut değildir. Eski tarayıcılarda çalışmasını sağlamak için şunları ekleyebilirsiniz: "event = event || window.event;" ve "event.target = event.target || event.srcElement;"
katma yazar Sheldon Neilson, kaynak

İşte addEventListener - jQuery kullanmadan

document.getElementById('myDiv').addEventListener('click',function(e){
   //this div has been clicked
    console.log('this div has been clicked');
});

GÜNCELLEME

İşte dinamik olarak yaratılmış elemanlar için jQuery olmayan çözüm

document.addEventListener('click',function(e){
    if( e.target.id == 'myDiv' )
    {
       //this div has been clicked
        console.log('this div has been clicked');
    }
});
3
katma
Sorun değil. Bu daha sonra oldu. DV kaldırıldı :)
katma yazar Gone Coding, kaynak
Tüm yorumları ve soru güncellemelerini araştırırsanız, OP'nin myDiv özelliği aslında dinamik olarak eklenir, bu nedenle bu işe yaramaz. Afedersiniz.
katma yazar Gone Coding, kaynak
Bu .onclick yerine .addEventListener() 'ı görmek güzel.
katma yazar Regent, kaynak
@TrueBlueAussie Sorunun dinamik olarak oluşturulan içerikten bahsettiğini görmedim, cevabımı şimdi yansıtacak şekilde güncelledim - teşekkürler
katma yazar CᴴᵁᴮᴮʸNᴵᴺᴶᴬ, kaynak
@Regent - teşekkürler, ben de belli bir "vanilya" eksik olduğunu hissettim
katma yazar CᴴᵁᴮᴮʸNᴵᴺᴶᴬ, kaynak

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var myDiv = document.getElementById('myDiv');

myDiv.style.cursor = 'pointer';
myDiv.onclick = function() {
    //DO SOMETHING
};
</div> </div>
1
katma

İşte başlıyoruz.

$('body').click(function(e) {      
  if (e.target.id == 'myDiv') {
    alert('My Div!!!!');
  }
});​
1
katma
Lütfen dikkat: Bubbled fare olayları, stil nedeniyle body ile başarısız olabilir. Varsayılan olarak document 'u kullanmak en iyisidir (yetki verilmiş etkinliklerde olduğu gibi) :)
katma yazar Gone Coding, kaynak
Cevabınız için teşekkürler ... Bu, tüm tarayıcılar için uyumlu mu? myDiv 'ın derin bir çocuğu olan herhangi bir öğe, if koşulu gerçekleşirse ne olur?
katma yazar Sashi Kant, kaynak
Evet gördüm ki :) Birden fazla cevabı kabul etmek için bir seçenek olacağını umuyorum :) Teşekkürler bir kez daha
katma yazar Sashi Kant, kaynak
@Mackan bu kara büyü. Bu kod hakkında: if (e.target.id == 'myDiv') daha kısa ve daha hızlı çalışır.
katma yazar Regent, kaynak
Neden tıklama yerine #myDiv'i seçmiyorsunuz?
katma yazar Mackan, kaynak
Bu durumda @Regent: bilmek iyi :)
katma yazar Mackan, kaynak
@Sashi Kant Evet, <body> etiketinin çocuğu olan herhangi bir öğe için geçerli olacaktır. Bunu Chrome, Firefox ve IE11'de test ettim. Kimse daha eski bir sürümü kullanmamı sağlayamaz, üzgünüm. Ancak bu jQuery 1.11.2 olduğundan, IE8'den çalışmalıdır. Ayrıca cevabımdaki düzenlememe dikkat edin, Regent'in yorumu mantıklı geldi, ben de bu değişikliği yaptım. Teşekkürler Regent.
katma yazar 4Dev, kaynak
@Mackan OP, öğenin tıklanan öğenin olup olmadığını belirlemek istedi.
katma yazar 4Dev, kaynak
@Regent İyi olacağına karar verdim.
katma yazar 4Dev, kaynak

check below code. check DEMO

Tıklanan öğeyi almak için event.target 'ı kullanın.

window.onclick = function(event)
{
  if(event.target.id == "myDiv"){
    alert("here")
  }else{
    alert('Body')
  }
 console.log(event.target.id)
}  
0
katma
"İş" burada göreceli bir terimdir. Tekrarlamak için: 1) event her zaman tüm tarayıcılar tarafından parametre olarak iletilmez. 2) Tek ve sadece window.onclick özelliğini sıraya sokuyorsunuz, böylece başka hiçbir şey kullanamaz. Bu iki nedenden ötürü (daha önce belirtilmiş) bu nedenle “iyi” bir çözüm değildir. Tüm tarayıcılarda veya diğer tüm kodlarda "çalışmaz" ( window.onclick kullanılan herhangi bir şey bozulur).
katma yazar Gone Coding, kaynak
Yeni bir cevap ekledim, tamamen bu konuyu tam olarak açıklamak için, delegasyondaki olaylar belirsiz görünebilir. OP ayrıca bunun daha fazla açıklanmasını istedi. DV için üzgünüm, ama beklemeliyim. Bu, soruna "uygun bir çözüm" değildir (anladığım kadarıyla). Sorun değişirse ve bu daha uygun hale gelirse DV'imi kaldıracağım. Teşekkürler.
katma yazar Gone Coding, kaynak
Tıklamak istediği div , jqgrid tarafından dinamik olarak oluşturulur, böylece $ ('# div1') gibi statik olarak bağlı bir jQuery seçimi kullanamaz. bir işleyici eklemek için. @Erkaner'a tam kredili yeni bir cevaba ayrıntılı bir açıklama ekliyorum. Bunun için bekleyin.
katma yazar Gone Coding, kaynak
Hayır ... soru, div1 ile bir şeyler yapmak istediğini söylüyor. "Öyleyse tıklarsam, div'in herhangi bir yerinde ". Kullandığı örnek kod, daha fazlasını yaptığını düşünmenize yol açmaz.
katma yazar Gone Coding, kaynak
Lütfen ingilizce kullan ... okunamayan :)
katma yazar Gone Coding, kaynak
Ve eğer jQuery'yi biliyor olsaydınız, delegasyonlu olay işleyicilerinin ne için olduğunu biliyorsunuzdur ... olayın değişmeyen bir ata elemanına işlenmesi "delege eder" > event time ) :) Lütfen tartışmadan önce ortaya çıkan sorunları anladığınızdan emin olun.
katma yazar Gone Coding, kaynak
Mükemmel? Belki de hayır: 1) event her zaman tüm tarayıcılar tarafından parametre olarak iletilmez. 2) Tek ve sadece window.onclick özelliğini sıraya sokuyorsunuz, böylece başka hiçbir şey kullanamaz. 3) Bu bir jQuery sorusuydu, bu yüzden tüm bu sorunlardan kaçınarak en uygun çözüm, temsilci bir olay işleyicisidir. 4) Çözümünüz kusursuz değil, kırılgan.
katma yazar Gone Coding, kaynak
@TrueBlueAussie biliyorum jQuery yetkilendirilmiş etkinliği . doz erkaner cevap ver penceresi açılırken eşyayı tıklattım mı?
katma yazar Nishit Maheta, kaynak
@TrueBlueAussie bu işe yarayacak, tamamen yanlış bir cevap değil. ve açıkça yanlış anladığınız için teşekkürler :)
katma yazar Nishit Maheta, kaynak
@TrueBlueAussie burada soruyu yanlış anlıyor ancak cevabım neden işe yaramayacak?
katma yazar Nishit Maheta, kaynak
Söz konusu notu açıklar mısınız? Not: Div'ime click olayını ekleyemiyorum, jqgrid'den rastgele oluşturulur
katma yazar Nishit Maheta, kaynak
jsfiddle.net/1fhrr7ug .. pencerede herhangi bir yere tıkladığımda bu uyarıyı dozla? sabit öğede olmayan pencerede herhangi bir yerde olay ateş tıklatıldığında hangi öğenin tıklandığını bilmek istediğini kontrol edin
katma yazar Nishit Maheta, kaynak
@TrueBlueAussie tıklandığında hangi öğenin tıklandığını kontrol etmek istiyorum, belirli bir öğeye onclick olayı eklemek istemeyin
katma yazar Nishit Maheta, kaynak
@TrueBlueAussie söz konusu notunu kontrol edin
katma yazar Nishit Maheta, kaynak
@TrueBlueAussie yine JavaScript ile etiketlenmiş bir soru okudu. ve ve myDiv kimliği sabit değil, bu nedenle erkaner yanıtı çalışmaz. Buradaki sorusuna göre örnek olarak delegated olayına gerek yok.
katma yazar Nishit Maheta, kaynak
oy için sebep belirtin
katma yazar Nishit Maheta, kaynak

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

$( "body" ).click(function( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
....

</div>
<div id="log"></div>
</div> </div>
0
katma