Карточка переворачивается при нажатии дочерней кнопки (с другими функциями). Как остановить распространение на родителя?

Question

У меня есть карта, которая переворачивается, когда кто-то нажимает на нее (и это совершенно нормально), чтобы пользователь мог прочитать больше информации с обратной стороны карты. Сама карта содержит 2 кнопки: первая - для перенаправления пользователя на другую страницу и вторая - для запуска модального всплывающего окна.

Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии любой из кнопок выполняются оба действия. Например, нажав кнопку, вызывающую всплывающее модальное окно - карта переворачивается и появляется модал (вы можете увидеть перевернутую карту на заднем плане).

Как я могу «изолировать» щелчки на кнопках, чтобы не вызвать переворот карты?

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

Я попытался stopPropagation () , но не смог заставить это работать с моим примером.

Answer 1

Вы можете сделать это с помощью JQuery.

Вы можете привязать событие щелчка к элементу карты, и когда пользователь щелкает карточку, проверяет, является ли выбранная цель щелчком мыши. кнопка. Если это не кнопка, переверните карту. В противном случае ничего не делать, и поведение кнопки по умолчанию сработает.

Таким образом, карта будет переворачиваться только тогда, когда пользователь щелкает карту, но не элемент с классом .btn.

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