Jquery 当按下子按钮（具有不同功能）时，卡片翻转。如何停止传播到父级？

我有一张卡，当有人按下它时，它会被翻转，这完全没问题，这样用户就可以从卡的背面读取更多信息。卡本身包含两个按钮：第一个按钮用于将用户重定向到另一个页面，第二个按钮用于触发模式弹出窗口

我面临的问题是，当我按下任何一个按钮时，两个动作都会执行。例如，按下触发模式弹出窗口的按钮-卡片被翻转，模式出现，您可以在背景中看到翻转的卡片

我如何“隔离”按钮上的点击以不触发卡片翻转

<div class="col-md-4 d-flex align-items-stretch">
   <div class="student-card">
      <div class="card" id="busainfo_@i" onclick= "this.classList.toggle('flipped');">
         <div class="card-body d-flex flex-column">
            <h3 class="card-title">Jesper</h3>
            <p class="card-text">Short Description</p>
            <button type="button" class="btn btn-primary redirect_1" click="window.location.href ='https://google.com';"> Read More </button>
            <button type="button" class="btn btn-primary opensend_1" id="opensend_1" data-toggle="modal" data-target="#sendview_1">Send msg</button>
         </div>
         <div class="side back d-flex flex-column">
            <h3>Jesper</h3>
            <p>About Jesper</p>
         </div>
      </div>
   </div>
</div>

我尝试了这个方法，但我的例子无法使它起作用

您可以使用JQuery来完成

您可以将click事件绑定到card元素，当用户单击该卡时，检查单击的目标是否是按钮。如果不是按钮，请翻转卡片。否则，不执行任何操作，将触发默认按钮行为

这样，只有当用户单击卡片时，卡片才会翻转，而不是使用.btn类的元素

$("#busainfo_@i").on("click", function(e){
   if(!($(e.target).hasClass("btn"))){
       $(this).toggleClass("flipped");
   }
});

---

你能不能也添加js逻辑，这样就更容易找到根本原因了？JQuery逻辑就是我想要得到的答案。除此之外，我没有任何js逻辑。我应该使用busainfo_@I而不是.card？我还使用onclick=this.classList.toggle'flipped'；当我定义卡片时，我应该如何在您的示例中实现它？我已经对答案进行了编辑，以使其更加具体。您可以使用ID busainfo_u@i选择元素，也可以使用toggleClass“flipped”切换“flipped”类。如果这样做，可以完全删除onclick=this.classList.toggle'flipped'；请注意，您需要JQuery才能使上述代码正常工作。如果您需要它在纯javascript中工作，那么需要一个稍微不同的答案。