同位素：按钮标签内的子元素（如图像或跨度）使按钮无法点击答案

【问题标题】：Isotope: Child elements inside button tag like image or span make button unclickable同位素：按钮标签内的子元素（如图像或跨度）使按钮无法点击
【发布时间】：2019-11-10 22:38:14
【问题描述】：

我稍微修改了 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 区域（滤色器红色和蓝色）时，没有任何反应。我想知道如何使整个按钮可点击。

【问题讨论】：

标签： javascript css jquery-isotope

【解决方案1】：

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

但可能有一种更优雅的方法可以使按钮即使在具有子元素时也可点击。有什么想法吗？

【讨论】：