js事件委托，e.target的子元素如何触发事件？

Question

实现点击table内的td时，把td绑定的data反馈出来。<div 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></div>table是动态生成的，把事件绑定到wrapper上，用target触发标签td的时候，因为有的td内部有font这个子元素，点击到font元素的区域无法触发。$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);