jQuery - 如何使元素不从父级执行 onclick 函数？

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>

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

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