css3中的point-events的用法说明

最新推荐文章于 2024-02-19 17:44:39 发布
最新推荐文章于 2024-02-19 17:44:39 发布
阅读量5.5k 收藏 6
点赞数 1
分类专栏： # html+css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42590083/article/details/109819656
版权

css3中的point-events的用法说明

语法：point-events:auto/none/visiblepainted/visiblestroke/visible/painted/fill/stroke/all
默认值为auto;

主要的作用就是鼠标的事件对你想要的事件无效化；如下图所示，第一个是正常的超链接，可以点击进入下个页面，而第二个用到了point-events，使鼠标的事件效果无效化。
图片效果：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en&#
最低0.47元/天 解锁文章
等待的L先生
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 point event,Pointer events 指针事件
weixin_33344629的博客
07-01 2521
Pointer events 指针事件目前绝大多数的Web内容都假设用户的指针定点设备为鼠标。然而，近年来的新兴设备支持更多不同方式的指针定点输入，如各类触控笔和触摸屏幕等。这就有必要扩展现存的定点设备事件模型，以有效追踪各类指针事件 - Pointer events 是一类可以为定点设备所触发的DOM事件。它们被用来创建一个可以有效掌握各类输入设备(鼠标、触控笔和单点或多点的手指触摸)的统一的D...
css中pointer-events属性详解
09-25
本文主要介绍了CSS中的pointer-events属性的用法，十分的详细，有需要的小伙伴参考下。
认识Pointer-events 透视事件
最新发布
2303_77072102的博客
02-19 263
比如这种场景：有一个canvas的涂鸦区域，用户可以在canvas上随便涂写啥，在该区域的特定位置会加一些点击事件，比如切换大小颜色啥的，此时就可以在该区域下加上按钮，把不同事件添加到不同按钮上。，它定义了在何种情况下元素可以成为鼠标事件（或触摸事件）的目标。这个属性可以控制元素是否可以被点击、是否可以触发鼠标事件，或者是否应该忽略鼠标事件，让事件传递给下面的元素。现在有一个层级很高的遮罩层和一个按钮它们兄弟级关系 遮罩层脱离了文档流 按钮有一个点击事件 现在需要点击按钮触发按钮的点击事件。
point-events:none
qq_38105960的博客
09-20 2984
pointer-events: none; //如同disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，这个链接，你是点不了的，并且 hover 也没有效果。 （值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了） 案例： <!DOCTYPE html...
CSS pointer-events属性的使用
weixin_33832340的博客
07-21 520
楔子 在前端的开发中，我们都是直接与用户接触，应该尽量让用户感到操作畅快愉悦，获得类似native的感觉。其中动画是最常用的方法。 这里的需求是，弹层的设计，这个弹层希望可以像 native 上的弹层一样，点击按钮出现，点击遮罩或按钮时关闭，并且出现和关闭时有动画效果（fade，slide等）。 问题 在关闭弹层时，以fadeOut动画效果为例，我这里是利用opacity从1 -> 0的过...
CSS pointer-events 用法和属性，意思
Java&Develop的博客
06-12 373
pointer-events: none; none 元素不能对鼠标事件做出反应 也就是，鼠标点击链接不能 跳转到指定路径div.ex2 { pointer-events: auto; } auto 默认值，设置该属性链接可以正常点击访问。 也就是，鼠标点击链接可以 跳转到指定路径......
CSS中pointer-events的应用
weixin_41309331的博客
11-29 427
分享一个最近新发现的CSS3新属性——pointer-events，使用简单，并且个人觉得应该还是能在很多时候派上用场的。（如果兼容性不至于太差的话哈哈哈） pointer-events属性值 先来看它的属性值，pointer-events有两个属性值值得我注意（毕竟对于我这个菜鸟来说，其他SVG专用的属性我还尚未能看懂啊唉）： auto——效果和没有定义pointer-events属性相同...
使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
09-24
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
css3 pointer-events 介绍详解
09-24
本篇文章主要介绍了css3 pointer-events，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css pointer-events属性
hellowzm的博客
09-20 485
最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。 阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScript点击动作触发的事件 一条CSS可以做许多事情是不是很神奇，我们在看一下兼容
CSS 中的pointer-event 属性
Lei2021_type的博客
04-13 1848
pointer-event:属性可以指定在什么情况下元素可以成为鼠标事件(也就是禁用掉当前以及子元素下面的所有事件) auto:默认值--对于svg元素，该值与visiblePainted效果相同 none:元素不会成为鼠标事件的target visiblePainted:只适用于SVG元素，元素只有在以下情况才会成为鼠标事件的目标： visibility属性值：visible，且鼠标指针在元素内部，且fill属性值非none ..
css 的pointer-events 属性
weixin_30507269的博客
02-11 185
1.css有好多属性，可以让你感觉到不可思议，关键是可以解决一些难以实现的问题，今天遇到一个，就是point-enevts属性 支持pointer-events属性的浏览器版本 2. 1 point-events属性的效果： 2.1.1阻止点击事件的效果 2.1.2阻止鼠标指针的显示 2.1.3阻止css里因为hover和active状态的改变而触...
div穿透事件(pointer-events)
song_song0927的博客
05-18 1896
穿透上层div执行下层div的事件
认识 CSS pointer-events 属性
老司机的后备箱
02-13 1万+
条目状态初始值auto可用值适用所有元素：auto/none，只适用于 SVG：bounding-box/visiblePainted/visibleFill/visibleStroke/visible/painted/fill/stroke/all可继承是的动画类型离散动画（关键帧之间不会有插帧，不会有过渡动画）我们来结合例子说明。是一个可继承属性，按照 CSS 的层叠与继承规则，子元素未设置时将会继承父值。如下例，self 元素设置，child 元素继承到也为none。
解析CSS属性之pointer-events
随风丶逆风的博客
08-10 3905
今天接到一个给页面增加水印的需求。最开始使用绝对定位 position: absolute + z-index + opacity 方式实现了第一版，可以添加水印，但是鼠标事件的目标总是在水印容器元素上，无法复制水印下面的内容，体验非常差。遂在 github 上找到了watermark-dom包，使用简单，顺利完成了需求。 如果只是这样使用轮子，能力永远等不到增长，于是阅读了它的源码，除开一些通用化的接口和功能，核心思路和我的相同，但为啥他就可以操作水印下元素内容呢？最后发现其使用了 css 属性 poin
css points
weixin_34082695的博客
05-16 82
<style type="text/css" rel="stylesheet">.a{ width:500px; height:400px;对放置图片的div区域设置宽和高 border:1px solid red;}*{ margin:0px; padding:0px;}</style><div class="a"> <img src="oYYBAFWV...
pointer-event属性详解
热门推荐
千里之行，始于足下！
08-13 3万+
一、pointer-event属性可以指定在什么情况下元素可以成为鼠标事件 二、取值： 1、pointer-event:auto;(默认值)，对于svg元素，该值与visiblePainted效果相同 2、pointer-event:none;元素不会成为鼠标事件的target 3、pointer-event:visiblePainted;只适用于SVG元素，元素只有在以下情况才会成...
pointer-events
珎珎啊
09-18 191
元素默认的 pointer-events 属性为 auto ，鼠标(其实不一定是鼠标，也可以是手或触摸笔对屏幕的动作) 在该元素的一个动作能够被该元素捕获，进行相应代码的执行后，会将该事件转交给父元素执行相应动作； 将元素的 pinter-events 属性设置为 none，鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获； 若HTML上两个元素之间没有包含关系，那么，鼠标事件就不会在这两个元素之间传递，而是上层的元素会覆盖下层的元素，导致下层元素捕获不到事件；将上层元素的 pointer
CSS3 超实用属性：pointer-events （可穿透图层的鼠标事件）
yiyueqinghui的博客
10-23 1万+
1、是什么 pointer-events 直译为指针事件，该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。 简而言之，就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件) 2、具体属性分析 用法分析： pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all auto ---
css pointer-events
03-16
CSS pointer-events是一种CSS属性，用于控制元素是否响应鼠标事件。它有以下几个取值： - auto：默认值，元素响应鼠标事件。 - none：元素不响应鼠标事件，鼠标事件穿透到下面的元素。 - visiblePainted：元素不响应鼠标事件，但是鼠标事件不会穿透到下面的元素。 - visibleFill：元素不响应鼠标事件，但是鼠标事件不会穿透到下面的元素。 - visibleStroke：元素不响应鼠标事件，但是鼠标事件不会穿透到下面的元素。 - painted：元素不响应鼠标事件，但是鼠标事件不会穿透到下面的元素。 - fill：元素不响应鼠标事件，但是鼠标事件不会穿透到下面的元素。 - stroke：元素不响应鼠标事件，但是鼠标事件不会穿透到下面的元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值