一、浏览器图片或者连接的默认操作
1.默认图片选中拖动
2.默认连接选中拖动
二、CSS pointer-events 取消选中和拖动,取消鼠标默认操作
加上pointer-events: none; 即可取消鼠标选中拖动操作。
<style> .block{ pointer-events: none; } img{ width: 300px; } </style>
<div class="block"> <a href="http://www.jnqianle.cn/"> 济南小程序开发|济南小程序制作|济南小程序定制|济南小程序开发公司 - 千乐微云 <br> 千乐微云是济南小程序开发,小程序定制,小程序制作,微信小程序开发的优秀技术团队。提供专业搭建微信小程序,百度小程序,字节小程序,支付宝小程序等多平台的济南小程序开发公司 </a> <br> <br> <img src="http://www.jnqianle.cn/upload/logo/content/202204/01/3b68f8d0-cdb3-49cb-b4e9-d518700047b6.jpg"> </div>
三、CSS pointer-events 使用介绍
定义和使用
pointer-events 属性用于设置元素是否对鼠标事件做出反应。
默认值: | none |
---|---|
默认值: | auto |
继承: | 无 |
动画: | no。 |
版本: | CSS3 |
JavaScript 语法: | object.style.all="initial" |
浏览器支持
表格中的数字表示支持该属性的浏览器最低版本号。
属性 | 谷歌 | Edge | 火狐 | Safari | Opera |
---|---|---|---|---|---|
pointer-events | 2.0 | 11.0 | 3.6 | 4.0 | 9.0 |
属性值
属性值 | 描述 |
---|---|
auto | 默认值,设置该属性链接可以正常点击访问。 |
none | 元素不能对鼠标事件做出反应 |
initial | 设置该属性为它的默认值 |
inherit | 从父元素继承该属性 |
/* 属性值 */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* 只适用于 SVG */ pointer-events: visibleFill; /* 只适用于 SVG */ pointer-events: visibleStroke; /* 只适用于 SVG */ pointer-events: visible; /* 只适用于 SVG */ pointer-events: painted; /* 只适用于 SVG */ pointer-events: fill; /* 只适用于 SVG */ pointer-events: stroke; /* 只适用于 SVG */ pointer-events: all; /* 只适用于 SVG */ /* 全局值 */ pointer-events: inherit; pointer-events: initial; pointer-events: unset;
visiblePainted
只适用于 SVG,元素只有在以下情况才会成为鼠标事件的目标:
- visibility 属性值为 visible,且鼠标指针在元素内部,且 fill 属性指定了 none 之外的值
- visibility 属性值为 visible,鼠标指针在元素边界上,且 stroke 属性指定了 none 之外的值
visibleFill
只适用于 SVG,只有在元素 visibility 属性值为 visible,且鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fill 属性的值不影响事件处理。
visibleStroke
只适用于 SVG,只有在元素 visibility 属性值为 visible,且鼠标指针在元素边界时,元素才会成为鼠标事件的目标,stroke 属性的值不影响事件处理。
visible
只适用于 SVG,只有在元素 visibility 属性值为 visible,且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fill 和 stroke 属性的值不影响事件处理。
painted
只适用于 SVG,元素只有在以下情况才会成为鼠标事件的目标:
- 鼠标指针在元素内部,且 fill 属性指定了 none 之外的值
- 鼠标指针在元素边界上,且 stroke 属性指定了 none 之外的值
visibility 属性的值不影响事件处理。
fill
只适用于 SVG,只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fill 和 visibility 属性的值不影响事件处理。
stroke
只适用于 SVG,只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标,stroke 和 visibility 属性的值不影响事件处理。
all
只适用于 SVG,只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fill、stroke 和 visibility 属性的值不影响事件处理。
更多:
Css Transition height auto过渡效果问题整理
Css3 border-radius 实现圆弧三角形_圆弧正三角形
标签:鼠标,SVG,元素,pointer,events,CSS,属性 From: https://www.cnblogs.com/tianma3798/p/16870811.html