为什么 event.target 给出多个结果？

Question

我有一个 3*3table。当我在我的控制台日志中单击 td 元素时，td 被打印了六次，我希望它只打印一次。为什么会发生这种情况以及如何预防？

JS:

$("*").click(function(event){
  console.log(event.target);//is this here executing 6 times, why...
});

HTML:

<table>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

Answer 1

发生这种情况是因为传播。由于您使用了 $('*')，因此它附加了点击处理程序 seperately 到 each 元素。因此，当您单击 td 时，事件冒泡到父元素处理程序。

要查看差异，请尝试

$("td").click(function(event){
  console.log(event.target);//will only log once since it was only attached to td
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<table>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

或停止传播

$("*").click(function(event){
  event.stopPropagation();
  console.log(event.target);//will only log once since propagation was stopped above
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<table>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

Answer 2

您正在 jquery 中选择 *，这意味着您的 DOM 中的每个元素都将被该查询选中。现在，在 jQuery 中，事件冒泡到 DOM 直到文档或正文。如果您单击一个具有 5 个 grandparents 的元素，该事件将为被单击的元素执行一次，然后为每个元素执行一次 parents 等等，直到到达正文。如果您不希望这种情况发生，您应该添加 event.stopPropagation.

$("*").click(function(event){
  event.stopPropagation();
  console.log(event.target);//is this here executing 6 times, why...
});

Answer 3

这也有帮助：http://jsfiddle.net/wek58fk4/1/

$("*").click(function(event){
  console.log(event.target);//is this here executing 6 times, why...
  return false;
});

为什么 event.target 给出多个结果？

Why event.target gives multiple results?

javascript

jquery

console.log