拖拽组件，取消子组件的点击事件 - 涉及拖拽组件，低代码工程 - pointer-events

最新推荐文章于 2024-05-03 11:08:18 发布

莫道开发

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量249

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43856422/article/details/132673495

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

问题原因

起因：在写拖拽组建的时候，如果子组件内部是视频或者地图，等有点击事件的元素，就会触发。
问题：触发就会在拖拽中产生bug

解决方案

pointer-events来阻止元素成为鼠标事件。
1.当组件移动时候，循环其子组件进行style.pointerEvents = ‘none’ 进行阻止
2.当鼠标按键松开时候，循环其子组件进行style.pointerEvents = ‘’ 进行关闭

一、pointer-events属性是什么？

pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。pointer-events 属性有很多值，但是对于浏览器来说，适用于 HTML 元素的只有三个值，其它的几个值都是针对 SVG 元素的（本身这个属性就来自于 SVG 技术，是一个 SVG 属性，目前在CSS规范中没有找到其定义）

二、属性值介绍

pointer-events 属性值

auto | none | inherit => HTML
visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all => SVG

针对HTML元素

none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的
pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获)。
auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。对于 SVG 内容，该值与 visiblePainted 效果相同。
inherit：将使用 pointer-events 元素的父级的值。
注意：使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标。

针对 svg 元素（ visibility、fill、stroke属性）

visiblePainted：该属性值等价于 auto ；当 svg 中的某个元素可见，并且当其 fill 不是 none 时，指针在fill区域，该事件能够被捕捉到，当其 stroke 不是 none 时，stroke 目标事件能够被捕捉到， visibility 为 hidden 事件不可捕获。
visibleFill：fill属性的值不会影响事件处理，fill 区域都能捕获事件目标；
visibility 为 hidden事件不可捕获
visibleStroke：stroke属性的值不会影响事件处理，stroke区域都能捕获事件目标；visibility为hidden事件不可捕获。
visible：fill 和 stroke 属性的值均不会影响事件处理， visibility 为 hidden 事件不可捕获。
painted：当其 fill 不是 none 时，指针在fill区域，该事件能够被捕捉到，当其 stroke 不是 none 时，stroke 目标事件能够被捕捉到， visibility 对事件处理无影响。
fill：fill、visibility 属性的值均不会影响事件处理，fill 区域都能捕获事件目标。
stroke：stroke、visibility 属性的值均不会影响事件处理，fill 区域都能捕获事件目标。
all：所有区域事件处理均可捕获。