jquery - 应用于父 div 时的锚触发或单击事件问题

Question

我一直在浏览几篇文章，但到目前为止还没有一个很有帮助。

我有一些花哨的按钮设置，如下所示：

<div class='orange-btn'>
<a href="url.html">BLah blah</a>
<span>Meta text</span>
</div>

我需要 div （或任何子项，即 ie <span>）上的单击事件来踢入锚点并引发click()函数。

截至目前，我收到“超出最大调用堆栈大小”错误或<error在我的浏览器选项卡完全崩溃之前简单说的错误。

感谢您的任何帮助。

Answer 1

这是因为事件冒泡——点击链接后，该点击将传播到 div，这会触发对链接的点击，无限循环。

添加以下内容以解决此问题：

$('a').on('click',function(e) {
   e.stopPropagation();
});

（$(document).on('click','a',function(e) {...});如果您的链接是动态添加的，请使用。）

Answer 2

为什么首先需要 div？为什么不这样做：

<a href="url.html" class="orange-button">
  <span class="label">Bla Bla</span>
  <span class="meta">Meta data</span>
</a>

如果您将 .orange-button 设置为显示为块，您应该获得完全相同的效果。像这样的东西：

.orange-button {
  display: block;
  /* the other styles that where on your div */
}
.orange-button .label {
  /* the styles that where on your a */
}
.orange-button .meta {
  /* the styles that where on your span */
}

我坚信除非真的有必要，否则不要使用任何 js。仍然有一些用户禁用了 js，他们应该在您的网站上获得相同的体验......

Answer 3

尝试这个

 $('div').children().click(function (){
  alert();
 });

在这里你需要触发点击