认识Pointer-events 透视事件

最新推荐文章于 2024-06-30 18:20:39 发布

凉辰

最新推荐文章于 2024-06-30 18:20:39 发布

阅读量353

点赞数 10

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2303_77072102/article/details/136175335

版权

文章讲述了如何在层级很高的遮罩层下，由于兄弟级关系导致点击事件无法触发的问题。通过引入CSSpointer-events属性，可以控制元素对鼠标事件的响应，将遮罩层的pointer-events设置为none，使得按钮的点击事件得以正常工作，常见于canvas、图片等场景中。

摘要由CSDN通过智能技术生成

现在我司有一个需求

现在有一个层级很高的遮罩层和一个按钮它们兄弟级关系遮罩层脱离了文档流按钮有一个点击事件现在需要点击按钮触发按钮的点击事件

<template>
  <div>
    <div class="one"></div>
    <div class="two" @click="affair"></div>
  </div>
</template>

<script setup lang="ts">
let affair =()=>{
  console.log('点击');
}
</script>

<style>
.one{
  width: 100%;
  height: 80px;
  background: #a8a8a8;
  opacity: 0.8;
  position: absolute;
  z-index: 999;

}
.two{
  width: 100%;
  height: 40px;
  background: green;
}
</style>

此时我们会发现点击绿色盒子是无法触发点击事件的，肯定还有人会想到用事件冒泡但是他们不是父子级关系这个方法就无法实现了。比如这种场景：有一个canvas的涂鸦区域，用户可以在canvas上随便涂写啥，在该区域的特定位置会加一些点击事件，比如切换大小颜色啥的，此时就可以在该区域下加上按钮，把不同事件添加到不同按钮上。

此时我们就需要一个全新的Css属性pointer-events，它定义了在何种情况下元素可以成为鼠标事件（或触摸事件）的目标。这个属性可以控制元素是否可以被点击、是否可以触发鼠标事件，或者是否应该忽略鼠标事件，让事件传递给下面的元素。

pointer-events 是一个可继承属性，按照 CSS 的层叠与继承规则，子元素未设置 pointer-events 时将会继承父值。