Perwakilan acara Javascript dengan pemilih dan kanak-kanak yang tidak diketahui

Question

Saya mempunyai pemilih dinamik (linkTrigger) yang sepatutnya menangkap klik pada elemen. Saya tidak tahu apakah linkTrigger mungkin atau jika ia akan mempunyai beberapa anak. Apabila saya menggunakan jQuery semuanya baik-baik saja.

Jika anda mengklik pada segi empat tepat hijau pertama (bukan bahagian nombor) anda akan melihat semua 3 pengendali berfungsi seperti yang diharapkan, tetapi jika anda mengklik pada nombor dalam segi empat tepat hijau pertama terdapat hanya pengendali jQuery dan javascript2 berfungsi, sekali lagi seperti yang diharapkan , kerana klik span dalam kotak hijau tidak memenuhi kriteria berikut:

if (e.target.classList.contains(linkTrigger.substring(1))) {

Saya tidak boleh menggunakan css point-events none pada kanak-kanak Saya tidak mahu diklik kerana saya tidak tahu apa itu linkTrigger dan saya tidak mahu kacau kandungannya.

Masalahnya ialah pengendali javascript2 tidak dinamik, bermakna saya perlu menambah pengendali ini pada setiap kotak ".a" baharu yang saya tambah kemudian di dalam dom.

Adakah penyelesaian yang lebih baik?

var linkTrigger = '.c'

//jquery works fine and its live

$('.wrap').on('click', linkTrigger, function(e) {

  var parent = $(this).closest('.a'),
    id = parent.attr('data-id')

  console.log('jquery: ' + id)

})

//javscript works but not if we click on child (number span inside green rectangle) and its live. I cant use **css point-events none** on children I dont want to be clicked because I dont knwo what **linkTrigger** is, neither I want to mess with its contents.

document.querySelector('.wrap').addEventListener('click', function(e){

  if (e.target.classList.contains(linkTrigger.substring(1))) {
    var parent = e.target.closest('.a'),
      id = parent.getAttribute('data-id')

    console.log('js: ' + id)
  }

})

//javscript2 works but its not live, meaning if I add more ".a" containers I have to attach this function call to each item.

document.querySelectorAll(linkTrigger).forEach(function(el){

   el.addEventListener('click', function(e){

       var parent = e.target.closest('.a'),
      id = parent.getAttribute('data-id')

        console.log('js2: ' + id)

   })
})

.a{
  
  width:300px;
  height:300px;
  background:red;
  margin:1px;
  
}
.b{
  
  width:200px;
  height:200px;
  background:blue;
  
}
.c{
  
  width:100px;
  height:100px;
  background:green;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">

  <div class="a" data-id="0">
    <div class="b">
      <div class="c"><span>657567645</span></div>
    </div>
  </div>

  <div class="a" data-id="1">
    <div class="b">
      <div class="c"></div>
    </div>
  </div>

</div>

Answer 1

event.target Tepat apa yang anda klik. Oleh itu, apabila anda mengklik pada span dalam elemen anda mendapat span, bukan elemen induk.

Jadi untuk mendapatkan klik pada rentang yang didaftarkan, anda boleh menggunakan closest() seperti yang anda lakukan dengan tag anchor.

var linkTrigger = '.c'

//jquery works fine and its live

$('.wrap').on('click', linkTrigger, function(e) {

  var parent = $(this).closest('.a'),
    id = parent.attr('data-id')

  console.log('jquery: ' + id)

})



document.querySelector('.wrap').addEventListener('click', function(e){

  if (e.target.closest(linkTrigger)) {
    var parent = e.target.closest('.a'),
      id = parent.getAttribute('data-id')

    console.log('js: ' + id)
  }

})

.a{
  
  width:300px;
  height:300px;
  background:red;
  margin:1px;
  
}
.b{
  
  width:200px;
  height:200px;
  background:blue;
  
}
.c{
  
  width:100px;
  height:100px;
  background:green;
  
}

sssccc


  

    

      
657567645