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>