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

我稍微修改了Dave DeSandro的示例：

在

标记内，我插入了

和

标记：

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

红色

例如：

---

现在，当直接单击按钮的子项

img

或

span

区域（滤色器红色和蓝色）时，什么都不会发生。我想知道如何使整个按钮可点击。

设置CSS规则

。按钮>*{pointer events:none}

解决了这个问题

但是，也许有一种更优雅的方法可以让按钮在有子元素的情况下也可以点击。有什么想法吗