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

Question

我有一张 3*3 的 table 。当我单击控制台日志中的 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

发生这种情况是由于传播。由于您使用了$('*')，因此它会将点击处理程序单独附加到每个元素。因此，当您单击 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>