由于嵌套标签，onClick 事件不起作用答案

【问题标题】：onClick event not working , because of nested tags由于嵌套标签，onClick 事件不起作用
【发布时间】：2017-06-13 14:41:50
【问题描述】：

onClick 事件不起作用，我有这个 html 代码

<a class='list-group-item media' href='#'>
    <div class='media-body'>
        <div class='pull-left'>
            <div class='lg-item-heading'></div>
            <small class='lg-item-text'></small>
        </div>
        <div class='pull-right'>
            <div class='lg-item-heading'>
                <button onClick='alert("Is it working??")' class='btn bg-danger pv20 text-white fw600'>
                    <i class='fa fa-times' aria-hidden='true'></i>
                </button>
            </div>
        </div>
    </div>
</a>

按钮元素有 -> onClick='alert("Is it working??")' ，但不工作

我猜是因为嵌套元素，它在外部元素<a>上触发而不是在内部元素<button>上触发，如何处理这个问题？？

只要我将鼠标悬停在内部元素 <button> 上 - 浏览器就会告诉我我正在悬停在 <a> 标记上，单击时会将我重定向到特定的 URL

【问题讨论】：

它对我来说很好，尝试给按钮一些内容。到目前为止，它是一个几乎没有任何宽度或高度的按钮 - <button onClick='alert("Is it working??")'><i></i> Click</button>。即使它在 <a> 中工作 <button> 也不是有效的 HTML 结构
链接内的按钮对我来说似乎是无效的 html
你在你的 js/jquery/锚点上尝试过 event.preventDefault 吗？
在 safari 10.0.3 和 chrome 59 中对我来说很好
在 sn-p 中工作正常

标签： javascript jquery html event-handling

【解决方案1】：

您需要从您的按钮stopPropagation()。这样可以防止它冒泡到您的 <a> 元素。

function onAnchorClick(e) {
  console.log('Anchor clicked');
}

function onButtonClick(e) {
  e.stopPropagation();
  alert('Is it working');
}

document.querySelector('a').addEventListener('click', onAnchorClick);
document.querySelector('button').addEventListener('click', onButtonClick);

<a class='list-group-item media' href='#'>
  <div class='media-body'>
    <div class='pull-left'>
      <div class='lg-item-heading'></div>
      <small class='lg-item-text'></small>
    </div>
    <div class='pull-right'>
      <div class='lg-item-heading'>
        <button class='btn bg-danger pv20 text-white fw600'>
          <i class='fa fa-times' aria-hidden='true'>Something</i>
        </button>
      </div>
    </div>
  </div>
</a>

我还重新排列了代码，并改为使用addEventListener 设置事件，因为您无法真正获得调用stopPropagation() 所需的事件对象。

也就是说，在锚点内放置一个按钮并不是一个好主意。如果你想要一个看起来像按钮的链接，你应该只是将锚设置为看起来像一个按钮。否则，没有理由将其包裹在锚中（尤其是在本例中），因此您应该移除锚。

【讨论】：