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) {&nbsp; for (var el = e.target; el !== e.currentTarget; el = el.parentElement) {&nbsp; &nbsp; if(el.tagName.toLowerCase() === 'td') {&nbsp; &nbsp; &nbsp; &nbsp; return console.log(el.dataset.data);&nbsp; &nbsp; }&nbsp; }}, false);