用CSS模拟stopPropagation()实现事件阻止冒泡

如果需要对未知类型元素实现类似stopPropagation()的事件阻止效果，可以通过CSS的pointer-events属性做全局处理，避免事件冒泡到父容器。

核心实现代码 #

CSS 代码 #

#ok {
  padding: 4px;
  background: #333;
  pointer-events: none;
}

a {
  pointer-events: all;
}

• 给容器#ok设置pointer-events: none，让它完全不响应任何指针事件；
• 给需要保持可点击的子元素<a>设置pointer-events: all，恢复其点击能力，这样点击子元素时，父容器不会被触发点击事件，达到阻止冒泡的效果。

对应HTML结构 #

<div id='ok'>
    <a href="#" id='beni'>
      点击此处不会触发容器的点击事件
    </a>
</div>

注：给容器添加内边距是为了更直观地测试容器本身是否会响应点击。

事件跟踪测试代码 #

为了验证效果，我们可以用以下代码跟踪点击事件：

测试HTML结构 #

<fieldset id="el_player">
  <div id="el_canvas">"Player" 被点击次数：</div>
  <button id="el_button">Button 被点击次数：</button>
</fieldset>
<label>
  <input type="checkbox" id="el_stopPropagation">
  在按钮点击事件中阻止冒泡
</label>

测试JS代码 #

function playerClick(event) {
  el_canvas.textContent += '|';
}

function buttonClick(event) {
  if (el_stopPropagation.checked) {
    event.stopPropagation();
  }
  el_button.textContent += '|';
}

el_player.addEventListener('click', playerClick)
el_button.addEventListener('click', buttonClick)

这段代码会分别统计容器和按钮的点击次数，勾选复选框后可以对比原生stopPropagation()和CSS方式的效果差异。

内容的提问来源于stack exchange，提问作者benxha