javascript - 不需要的递归 - 如何避免子级单击事件传递给 jquery 中的父级？

Question

我有一些元素，大致如下:

<div>
    <a>
<div>

当用户单击 div 上的任意位置时，我想要 a要单击的元素 - 出于可用性目的。

简单吧？所以我写了这个:

$('div.class').click(function(){  
    $('a.class', this).click();
    console.log('clicked'); 
});

问题是，这会点击 a元素没问题，但事件传播到 div ，单击它，单击 a ，这……你可以看到它的去向。

我在 JSfiddle 上制作了一个示例 here 但它不显示控制台日志。因此，如果您单击，Firebug 不会显示任何内容。但是我的本地站点让 Firebug 疯狂地记录日志(点击)，以至于最终脚本被杀死说 too much recursion on this page

如何停止这个递归？

是的，我知道，我知道我可以使用 window.location为此，但是单击链接会做一些额外的工作，并且还会使用浏览器的窗口历史记录，所以我真的很想单击那个恶毒的 a而不让它点击它的爸爸。或者妈妈。或者无论如何div是。

请阅读

由于每个人都一遍又一遍地建议同样的事情，但它不起作用，请看看这个 JSfiddle 。在回答之前先尝试一下，看看是否有效。当您点击 div ，Google 应该加载。这就是我正在寻找的。

Answer 1

如果这是您的标记:

<div>
    <a></a>
</div>

...您需要做的就是在 css 中执行以下操作:

div a { display: block};

然后， anchor 元素将拉伸(stretch)并占据父 div 中的所有可用空间。但是，如果该 div 中存在其他一些元素，您可以这样做:

$('a.class').click(function(event){
   event.stopPropagation();
   alert('you clicked on me');
});

$('div.class').click( function () {
  $(this).children('a.class').trigger('click');
});