jQuery

Question

在这个例子中，我在主 div 上有 onclick 函数，我不希望按钮执行相同的 onclick，只执行它自己的？我应该如何贬低这个？

<div onclick="$('#extra-info').slideToggle();" class="card card-body item">
<div class="row">
    <h6 style="position:absolute;left:2%;">Comanda      #1</h6>
    <h5 style="position:absolute;right:2%;">15 min</h5>
</div>
<br>
<br>
<div class="row">
    <div class="col col-md-10">
        <h5>Cristian Cutitei</h5>
        <h6>0737032567</h6>
    </div>
    <div>
        <button id="status" onclick="checkText('#status', 2);" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
    </div>
</div>

<div id="extra-info" style="display:none;">
    <br>

</div>

提前致谢！

Answer 1

您可以通过在按钮中调用 event.stopPropagation(); 来实现。

<button id="status" onclick="checkText('#status', 2); event.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>

从 Here

了解更多信息

但我会建议一个更清洁的解决方案，将卡片正文与按钮所在的卡片页脚分开。

<div class="card card-body item">
  <div onclick="$('#extra-info').slideToggle();">
    <div class="row">
      <h6 style="position:absolute;left:2%;">Comanda #1</h6>
      <h5 style="position:absolute;right:2%;">15 min</h5>
    </div>
    <br>
    <br>
    <div class="row">
      <div class="col col-md-10">
        <h5>Cristian Cutitei</h5>
        <h6>0737032567</h6>
      </div>
    </div>
  </div>

  <div>
    <button id="status" onclick="e => e.stopPropagation();" style="margin:auto;" class="btn btn-primary"><span>In pregatire</span></button>
  </div>
</div>
<div id="extra-info" style="display:none;">
  <br>
</div>

jQuery - 如何让元素不执行父元素的onclick函数？

jQuery - How to make element not execute onclick function from parent?

html

javascript

onclick