Javascript-Ereignisdelegierter mit unbekanntem Selektor und unbekannten Kindern

Question

Ich habe einen dynamischen Selektor (linkTrigger), der Klicks auf ein Element erfassen soll. Ich weiß nicht, was linkTrigger sein könnte oder ob es einige Kinder haben wird. Wenn ich jQuery verwende, ist alles in Ordnung.

Wenn Sie auf das erste grüne Rechteck klicken (nicht auf den Zahlenteil), sehen Sie, dass alle drei Handler wie erwartet funktionieren. Wenn Sie jedoch auf die Zahl im ersten grünen Rechteck klicken, funktionieren nur jQuery- und Javascript2-Handler, wiederum wie erwartet , weil das Klicken auf die Spanne im grünen Feld die folgenden Kriterien nicht erfüllt:

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

Ich kann css point-events none nicht für Kinder verwenden. Ich möchte nicht angeklickt werden, weil ich nicht weiß, was linkTrigger ist, und ich möchte mich nicht mit seinem Inhalt herumschlagen.

Das Problem ist, dass der Javascript2-Handler nicht dynamisch ist, was bedeutet, dass ich diesen Handler zu jedem neuen „.a“-Feld hinzufügen muss, das ich später im Dom hinzufüge.

Gibt es eine bessere Lösung?

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 正是您点击的内容。因此，当您单击元素中的跨度时，您将获得跨度，而不是父元素。

因此，要获得对跨度的点击进行注册，您可以像获取锚标记一样使用closest()。

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

  

    

      
657567645