3

该event.target函数适用于 div 而不适用于 table 元素。

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

演示：http: //jsfiddle.net/kavinhuh/z4rkW/31/

4

4 回答 4

4

因为实际的 e.target 是一个 TD，而不是一个表格，
尽管您的表格 HTML 元素结构不正确。表应该有tr和td元素。

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

// 是第一个触发事件的元素 ( TD)

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

// 是委托给事件的元素，在这种情况下.body

于 2013-11-14T15:29:26.467 回答
2

这是因为您的 HTML 是非法的。如果你有非法的 HTML，你不应该期望你的代码能正常工作。

文本可能不是table. 您需要 atr和 atd或 a th。浏览器重新解释您的 HTML 并使某些内容合法。在这种情况下，它将文本放在表格之外：

    jjj
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="three body"></table>

这取自 Chrome 的 DOM 检查器。解决方案是将文本合法地放在table.

于 2013-11-14T15:32:21.413 回答
2

使用this而不是e.target.

e.target将为您提供单击的元素，而不是事件附加到的元素。当事件附加到的元素具有子元素时，您单击子元素e.target将返回子元素。

alert(this.className);
于 2013-11-14T15:36:53.817 回答
1

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

于 2013-11-14T15:33:42.747 回答