Запретить анимацию кнопки материала при нажатии

Question

Я создал страницу с кнопкой в ​​кнопке, как показано ниже:

<button mat-button class="library-tile-button">

    <button mat-button class="edit-library-button">
        <img class="edit-library-img" src="..."/>
    </button>

    <img class="library-picture" src="..."></img>

</button>

Кнопки используют angular дизайн материала.

Когда я нажимаю на родительскую кнопку I Я хочу перейти на определенную страницу, и когда я нажимаю на дочернюю кнопку, я хочу отобразить дополнительный контент. Это работает.

Когда я нажимаю на родительскую кнопку, запускается анимация материала по умолчанию angular для кнопки. Я не против. Моя проблема в том, что когда я нажимаю на дочернюю кнопку, это выглядит так, как будто родительская кнопка также была нажата, и поэтому анимация материала по умолчанию angular запускается для обеих кнопок. Я хотел бы предотвратить это. Я хочу, чтобы анимация активировалась только для дочерней кнопки, когда я нажимаю на нее.

Есть ли какие-либо подсказки, как мне этого добиться? Заранее спасибо.

Answer 1

Как сообщает WorksLikeACharm, не вкладывайте кнопки. Если ваша проблема заключается только в позиционировании, поместите их в div и используйте позицию absolute на одном из них.

Вот так:

div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
  position:absolute;
  top:40px;
  left:40px;
}
.edit-library-button img {width:30px;}

<div>
  <button mat-button class="library-tile-button"> 

      <img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dVHbFhOgyA0P0JbNu_aS1Tynre891APND36cFHll9qyIQWZ2vEk9kmg" />

  </button>
  <button mat-button class="edit-library-button">
          <img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
   </button>
 </div>

Answer 2

Возможным решением будет удалить вложение ваших кнопок, разделив таким образом события нажатия.

<button mat-button class="library-tile-button">    

    <img class="library-picture" src="..."></img>

</button>

<button mat-button class="edit-library-button">
        <img class="edit-library-img" src="..."/>
 </button>