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/

Answer 1

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

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

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

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

//是委托给该事件的元素，在本例中为.body

Answer 2

这是因为您的HTML是非法的。如果您有非法HTML，则不应期望您的代码能够正常运行。

文字可能不是table的直接子项。您需要tr以及td或th。浏览器会重新解释您的HTML并使某些内容合法化。在这种情况下，它将文本放在表格之外：

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

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

中

Answer 3

使用this代替e.target。

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

alert(this.className);

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

时，这就是您的事件处理程序未触发的原因

e.target（）不适用于表元素

4 个答案: