javascript - js事件委託，e.target的子元素如何觸發事件？

Question

實作點擊table內的td時，把td綁定的data回傳。

<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>

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

雷雷