应用于父div时，锚点触发或单击事件问题

Question

我已经浏览了几篇文章，但没有一篇对我有很大帮助。

我有一些花哨的按钮设置，像这样:

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

我需要一个点击事件上的div(或任何子，即<span>)踢到锚，并导致click()功能。

到目前为止，我得到'最大调用堆栈大小超过'错误或错误，简单地说<error之前，我的浏览器标签完全崩溃。

感谢您的帮助。

Answer 1

这是因为事件冒泡——当你点击链接后，点击将传播到div，这将触发点击链接，无限

添加以下内容来解决这个问题:

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

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

Answer 2

try this

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

在这里你需要触发a点击

Answer 3

为什么首先需要div ?为什么不这样做呢?

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

如果你设置。orange按钮显示为块，你应该得到完全相同的效果。像这样:

.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，他们应该在你的网站上获得同样的体验。