点击父容器外的元素时click事件无法触发的技术问题

问题描述 #

我设置了一个Vue元素使其尺寸大于父容器，但点击该元素超出父容器的部分时，click事件监听器无法触发；仅点击元素在父容器内的部分时，click事件才能正常生效。

相关代码：

<div :style="`width: ${width - 40}px;`"
     @click="
       () => {
         showWarning = !showWarning;
       }
     "
>

核心原因 #

这种情况几乎都是因为父容器设置了overflow: hidden——当父元素开启这个属性时，超出父容器范围的子元素部分会被浏览器视觉裁剪，同时这部分区域的点击事件会被浏览器判定为不在父元素的可交互范围内，因此无法传递到子元素的click事件监听器上。

解决方案 #

• 若不需要父容器的裁剪效果，直接移除父容器的overflow: hidden样式，子元素超出部分的点击事件就能正常触发。
• 若必须保留父容器的overflow: hidden，可以把click事件绑定到父容器上，通过事件委托来处理；或者将子元素设置为position: absolute，使其脱离父容器的布局流，这样超出部分不受父容器overflow属性的限制。
• 另一种场景适配方案：给父容器添加pointer-events: none，同时给子元素添加pointer-events: auto，让子元素的点击事件可以穿透父容器的限制（此方法需确保父容器本身不需要响应点击事件）。

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