同位素：按钮标签内的子元素（如图像或跨度使按钮不可点击）>

Question

我稍微修改了Dave DeSandro的Isotope示例Combination filters with a function, vanilla JS：

在<button>标签内，我插入了<picture>和<span>标签：

<button class="button" data-filter=".red">
  <picture>
    <source data-srcset="https://via.placeholder.com/30/f00/ 1x, https://via.placeholder.com/30/f00/ 2x" type=image/webp>
    <source data-srcset="https://via.placeholder.com/30/f00/ 1x, https://via.placeholder.com/30/f00/ 2x">
    <img class=l src=https://via.placeholder.com/30/f00/ loading=eager alt>
  </picture>
  <span>red</span>
</button>
示例：https://codepen.io/dash/pen/NWWBqjW

现在，当直接单击按钮的子级img或span区域（红色和蓝色的彩色滤光片）时，什么也没有发生。我不知道如何使整个按钮可点击。

我对Dave DeSandro的同位素示例进行了稍微修改，并使用了香草JS函数：在标签内，我插入了一个[[和标签：

Answer 1

设置CSS规则.button > * {pointer-events: none}解决了该问题。

但是，即使按钮具有子元素，也可能有一种更优雅的方法来使按钮可单击。有什么想法吗？