Question

onClick事件无效，我有这个HTML代码

＆＃13;

    /* BASE CLASSES */
    button {
        font-size: 1.7rem;
    }
    .outline { /* Only use one level */
        border-style: solid;
        border-color: #387ef5;
        color: #387ef5;
        background-color: transparent;
    }

    /* B1 + DIRECTION */
    [dir="ltr"] .b1 {
        border: 0;
    }
    [dir="ltr"] .b1.outline {
        border-width: 1px;
    }

    /* B2 NO DIRECTION */
    button.b2 { /* Be more specific to replace previous rule */
      border: 0;
    }
    button.b2.outline {
      border-width: 1px;
    }

＆＃13;

按钮元素有 - ＆gt; onClick =＆＃39;警告（＆＃34;它是否正常工作？＆＃34;）＆＃39; ，但无法正常工作

我猜它是因为嵌套元素，它会触发外部元素<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>而不是内部元素<a>，如何处理这个问题？

只要我将鼠标悬停在内部元素<button>上 - 浏览器就会告诉我，我将鼠标悬停在<button>标记上并点击后会将我重定向到特定网址< / p>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

那就是说，在锚内部设置一个按钮并不是一个好主意。如果您想要一个看起来像按钮的链接，您应该将锚点设置为看起来像一个按钮。否则，没有理由将它包装在一个锚中（特别是在这个例子中），所以你应该只删除锚。

由于嵌套标签，onClick事件无法正常工作

1 个答案: