Question

我有一张3 * 3的桌子。当我单击控制台日志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时，事件冒泡直到父元素处理程序。

要查看差异，请尝试

＆＃13;

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

＆＃13;

<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>

＆＃13;

或停止传播

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您正在jquery中选择*，这意味着该查询将选择DOM中的每个元素。现在，在jQuery中，事件冒泡DOM，直到文档或正文。如果单击一个包含5个祖父母的元素，则对于单击的元素将执行一次事件，对于父元素等每个元素执行一次，直到到达正文。如果您不希望发生这种情况，则应添加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会给出多个结果？

3 个答案: