e.target()在表格元素中无法工作

Question

event.target函数对于div元素效果良好，但对于表格元素则不行。

HTML代码：

<div class="one body" >
    sd
    </div>
<div class="two body">
    sddsd
</div>
    <table width="100%"  border="0" cellspacing="0" cellpadding="0" class="three body">jjj</table>

JS：

$(".body").click(function(e){


    alert("xxxxxxxxx"+e.target.className);
});

DEMO: http://jsfiddle.net/kavinhuh/z4rkW/31/

- kavinhuh

---

你的表格HTML代码无效。jjj其实并没有在表格中渲染出来。你需要（先加上<tbody>，然后）添加一个<tr>，最后是<td>。 - gen_Eric

感谢大家提供的非常有帮助的评论，我喜欢 Stack Overflow。 - kavinhuh

Answer 1

实际的 e.target 是 TD，而不是 table。
虽然您的 Table HTML 元素结构不正确。表格应该包含 tr 和 td 元素。

alert("Class: "+ event.target.className );

// 是首先触发事件的元素（TD）

alert("Class: "+ this.className ); 

// 是被委托给事件的元素，这里是 .body 元素。

- Roko C. Buljan

---

哪个浏览器将文本放在 td 内？Chrome 将其完全放在 table 外。 - lonesomeday

@doh 对啊，我也是这么想的。本来以为像浏览器自动添加<tbody>标签一样，这个也能自动处理。但是检查了一下，确实如此。FireFox也是这样。反正我正准备测试，你只是比我快一步 ;) - Roko C. Buljan

Answer 2

这是因为您的HTML代码存在错误。如果您的HTML不合法，就不能保证代码能正常工作。

文本内容不能直接作为标签的子元素。您需要添加标签，并且再添加一个

或	标签。浏览器会重新解析您的HTML代码，使其合法化。在这种情况下，浏览器将文本放在表格之外： jjj <table width="100%" border="0" cellspacing="0" cellpadding="0" class="three body"></table> 这是从Chrome的DOM检查器中获取的。解决方案是将文本合法地放置在table内。

- lonesomeday

Answer 3

请使用this代替e.target。

e.target会返回被点击的元素，而不是事件所依附的元素。当事件所依附的元素有子元素时，如果您点击了子元素，则e.target将返回该子元素。

alert(this.className);

- Dr.Molle

Answer 4

table元素不能包含任何文本内容，因此您的HTML实际上将呈现为：

  <div class="one body">
    sd
    </div>
<div class="two body">
    sddsd
</div>
    jjj<table class="three body" border="0" cellpadding="0" cellspacing="0" width="100%"></table>

因此，当您单击 jjj 时，您的事件处理程序未触发。

- shyam