Vue嵌套元素点击事件异常：span点击不触发、按钮触发父span事件咨询

问题原因及解决方案 #

1. 点击span无响应的问题

这是最常见的元素可点击区域缺失问题：

• span默认是行内元素，如果你内部的div/button使用了浮动、固定/绝对定位脱离了文档流，会导致父span的高度/宽度为0，没有可交互的点击区域，自然触发不了绑定的click事件
• 排查方案：给.this_mask临时加背景色background: rgba(255,0,0,0.3)，看页面上是否有对应红色区域，没有的话就是span本身没有尺寸
• 修复方案：给span加样式调整为块级元素，主动设置尺寸：

.this_mask {
  display: block;
  /* 根据需求设置宽高，比如覆盖全屏的话可以加以下配置 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

2. 点击button触发span事件、但控制台无thisMask日志的问题

• 点击button同时触发span的事件是事件冒泡的默认机制：子元素的点击事件会默认逐层向上传递给所有父元素，所以button的click触发后会冒泡到span，触发span的click事件
• 你提到仅输出thisButton的日志、但父组件能收到thisMaskClicked事件，大概率是控制台日志过滤规则导致漏看了日志，你可以关闭控制台的日志筛选、切换到「所有级别」查看完整输出
• 如果你不需要点击button时触发父span的事件，给button的click事件加.stop修饰符阻止冒泡即可，修改模板代码为：

<span class="this_mask" @click="thisMask">
  <div class="this__wrap">
    <div class="this__text">
      <button class="this__button" @click.stop="thisButton"></button>
    </div>
  </div>
</span>

如果排查完以上配置还是有问题，可以检查thisMask方法是否有语法报错、是否存在同名方法覆盖的情况。

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