Délégué d'événement Javascript avec sélecteur inconnu et enfants

Question

J'ai un sélecteur dynamique (linkTrigger) qui est censé capturer les clics sur un élément. Je ne sais pas ce que pourrait être linkTrigger ou s'il aura des enfants. Quand j'utilise jQuery, tout va bien.

Si vous cliquez sur le premier rectangle vert (pas sur la partie numérique), vous verrez les 3 gestionnaires fonctionner comme prévu, mais si vous cliquez sur le numéro dans le premier rectangle vert, seuls les gestionnaires jQuery et javascript2 fonctionnent, encore une fois comme prévu , car cliquer sur la durée dans la case verte ne répond pas aux critères suivants :

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

Je ne peux pas utiliser css point-events none sur les enfants. Je ne veux pas qu'on clique dessus parce que je ne sais pas ce qu'est linkTrigger et je ne veux pas jouer avec son contenu.

Le problème est que le gestionnaire javascript2 n'est pas dynamique, ce qui signifie que je dois ajouter ce gestionnaire à chaque nouvelle case ".a" que j'ajoute plus tard dans le dom.

Existe-t-il une meilleure solution ?

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 Exactement ce sur quoi vous avez cliqué. Ainsi, lorsque vous cliquez sur une étendue dans un élément, vous obtenez l'étendue, pas l'élément parent.

Donc, pour enregistrer les clics sur les étendues, vous pouvez utiliser le plus proche() comme vous le faites avec les balises d'ancrage.

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