javascript - 如何在 Javascript 中使用事件委托(delegate)？

Question

elem.addEventListener('click',function(e){
    if(e.target && e.target.matches("span#save-icon")){
      var HEX = e.target.parentNode.innerHTML.split('span')[2].split('>')[2].split('<')[0];
      save_to_my_space(HEX);
      console.log(HEX);
    }
  });

这里 elem 是一个有 8 个子元素的父 div，我在 elem 的所有子元素上使用委托(delegate)事件。每当我通过单击 elem 事件的子项之一触发事件时，都会触发多次等于 elem 的子项数。如何解决这个问题？

Answer 1

使用event.stopPropagation() 将解决问题

如@George 所述，请查看文档 here.

elem.addEventListener('click',function(e){
    if(e.target && e.target.matches("span#save-icon")){
      e.stopPropagation()
      var HEX = e.target.parentNode.innerHTML.split('span')[2].split('>')[2].split('<')[0];
      save_to_my_space(HEX);
      console.log(HEX);
    }
  });