防止点击时出现材质按钮动画

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>

按钮使用棱角分明的材质设计。

当我单击父按钮时，我想导航到某个页面，当我单击子按钮时，我想显示一些额外的内容。这是有效的。

当我点击父按钮时，按钮的默认角度材质动画被触发。这对我来说没问题。我的问题是，当我单击子按钮时，就好像也单击了父按钮一样，因此两个按钮都会触发默认的角度材质动画。我想防止这种情况发生。我想要的是当我点击它时只为子按钮触发动画。

有什么方法可以实现吗？提前致谢。

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>