javascript - JS-Ereignisdelegation, wie lösen die untergeordneten Elemente von e.target Ereignisse aus?

Question

Wenn Sie auf den TD in der Tabelle klicken, werden die an den TD gebundenen Daten zurückgemeldet.

<p class='wrapper'>
    <table>
        <thead>.......</thead>
        <tbody>
            <tr>
                <td data-data='1'>1</td>
                ....
                <td data-data='2'><font color='red'>2</font></td>
                ....
            </tr>
            ....
        </tbody>
    </table>
</p>

Die Tabelle wird dynamisch generiert. Binden Sie das Ereignis an den Wrapper und verwenden Sie das Ziel, um das Tag-TD auszulösen. Da einige TDS das Schriftart-Unterelement enthalten, kann der Bereich, in dem auf das Schriftart-Element geklickt wird, nicht ausgelöst werden.

$wrapper = document.querySelector('.wrapper');
$wrapper.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase === 'td') {
        console.log(e.target.dataset.data);
    }
},false);

Answer 1

$wrapper = document.querySelector('.wrapper');
$wrapper.addEventListener('click', function(e) {
  for (var el = e.target; el !== e.currentTarget; el = el.parentElement) {
    if(el.tagName.toLowerCase() === 'td') {
        return console.log(el.dataset.data);
    }
  }
}, false);