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

问题描述

问 题

实现点击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);

解决方案

$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);

这篇关于javascript - js事件委托，e.target的子元素如何触发事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！