如何阻止点击子元素输入框时父元素CSS :active伪类被触发

我明白你的困扰——点击输入框时父卡片的:active样式自动触发，看起来像是已经选中了这个选项，体验确实不太好。之前用event.stopPropagation()和event.preventDefault()没用，是因为:active是浏览器原生的鼠标按下状态，和事件冒泡机制不是一回事，而且你监听的是click事件，而:active早在mousedown阶段就已经生效了。

下面给你两种可行的解决方案：

方案一：纯CSS实现（现代浏览器适用） #

利用CSS的:has选择器，当父卡片处于:active状态且内部的输入框也处于:active状态时，重置父卡片的:active样式。这样点击输入框时，卡片不会出现选中效果，而点击卡片其他区域时正常生效。

修改后的CSS代码：

body {
  background-color:#000000;
}
.card {
  background-color: #8f97a3;
  width:200px;
  height:200px;
  margin:10px;
}
.card div, .card input {
  margin:6px;
  padding:6px;
}
/* 正常的卡片:active样式 */
.card:active {
  background-color:#b9bec5;
  margin:10px 6px 10px 14px;
}
/* 当点击输入框时，重置卡片的:active样式 */
.card:active:has(input:active) {
  background-color: #8f97a3;
  margin:10px;
}

HTML移除多余的onclick事件即可：

<div class="card">
  <div>1</div>
</div>
<div class="card">
  <div>2</div>  
</div>
<div class="card">
  <input type='text' value='pick a number'>
</div>

注意：:has选择器目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容旧浏览器，建议选用下面的方案。

方案二：JavaScript控制状态（兼容性更好） #

放弃使用CSS的:active伪类，改用JavaScript手动添加/移除自定义的.active类，这样可以精确控制触发选中效果的时机——点击卡片非输入框区域时添加类，点击输入框时跳过，同时在鼠标松开或离开时移除类。

修改后的CSS：

body {
  background-color:#000000;
}
.card {
  background-color: #8f97a3;
  width:200px;
  height:200px;
  margin:10px;
  transition: all 0.1s ease; /* 可选，添加过渡让效果更平滑 */
}
.card div, .card input {
  margin:6px;
  padding:6px;
}
/* 用自定义的.active类代替:active伪类 */
.card.active {
  background-color:#b9bec5;
  margin:10px 6px 10px 14px;
}

添加JavaScript代码：

// 获取所有卡片元素
const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  // 鼠标按下时添加.active类
  card.addEventListener('mousedown', (e) => {
    // 如果点击的是输入框，不添加类
    if (e.target.tagName === 'INPUT') return;
    card.classList.add('active');
  });

  // 鼠标松开或离开卡片时，移除.active类
  const removeActiveClass = () => {
    card.classList.remove('active');
  };
  card.addEventListener('mouseup', removeActiveClass);
  card.addEventListener('mouseleave', removeActiveClass);
});

HTML同样移除onclick事件：

<div class="card">
  <div>1</div>
</div>
<div class="card">
  <div>2</div>  
</div>
<div class="card">
  <input type='text' value='pick a number'>
</div>

这个方案兼容所有主流浏览器，包括旧版本，而且逻辑清晰，你还可以根据需要扩展其他交互（比如键盘选中）。

备注：内容来源于stack exchange，提问作者Zack Austin