首页 > 其他分享 >Css 取消连接/图片拖动或者选中_CSS pointer-events

Css 取消连接/图片拖动或者选中_CSS pointer-events

时间:2022-11-08 18:55:15浏览次数:72  
标签:鼠标 SVG 元素 pointer events CSS 属性

一、浏览器图片或者连接的默认操作

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 实现圆弧三角形_圆弧正三角形

Css 浮动高度问题_Css浮动兄弟元素高度问题

标签:鼠标,SVG,元素,pointer,events,CSS,属性
From: https://www.cnblogs.com/tianma3798/p/16870811.html

相关文章

  • 10 个CSS实现元素居中的方法汇总
    英文|https://javascript.plainenglish.io/10-css-tricks-you-should-know-for-centering-elements-61092d35b659翻译|杨小爱在前端开发工程师的日常生活中,使用CSS使......
  • 9 个你可能从未使用过的很棒的 CSS 属性
    英文|https://javascript.plainenglish.io/9-awesome-css-properties-that-you-probably-have-never-used-8cc4c385c3c6翻译| 杨小爱如今,网络上的每个网站或Web应用程......
  • 如何用CSS实现漂亮的个人资料卡效果
    英文| https://javascript.plainenglish.io/design-a-beautiful-profile-card-with-css-4407c558b733翻译| web前端开发公众号我们可以仅使用CSS为我们的网站做一些很棒......
  • 如何通过使用CSS实现渐变文字的效果
    英文|https://bootcamp.uxdesign.cc/gradient-text-in-css-609068d3f953翻译|web前端开发很难使网站脱颖而出。因此,这里有一个小技巧,可以改善所有目标网页或标题:使用渐......
  • 当Sass和新CSS功能发生冲突时的解决方案
    英文| https://css-tricks.com/when-sass-and-new-css-features-collide/翻译|web前端开发我们都知道,CSS添加了许多新的很酷的功能,例如,自定义属性的新功能,css的一些基础......
  • 24个适合初学者练习的CSS 和 Javascript 动画效果案例
    英文|https://niemvuilaptrinh.medium.com/24-css-javascript-animation-effects-a4c5b6e98a59翻译|杨小爱在昨天的文章中,我跟大家分享了《​​40个适合初学者练习HTML......
  • 40个适合初学者练习HTML和CSS的案例
    英文|https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361翻译 |杨小爱使用多个库进行网页设计会在一定程度上增加页面加载时间,......
  • 如何使用 CSS 改进 Web Vitals
    原文| ​​https://blog.bitsrc.io/how-to-improve-web-vitals-with-css-c7ca80b8369f​​原译|小爱WebVitals可帮助你快速跟踪和了解你网站在性能方面的表现。因此,了......
  • 简洁清爽表格css
    效果图压缩后的CSS<tableclass="gridtable">table部分设置class=gridtable即可table.gridtable{font-family:verdana,arial,sans-serif;font-size:11px;color:#33333......
  • scss 语法
    scss语法介绍 这里既然是对语法的介绍,那么至于如何安装和编译scss我就不多少了,主要是因为本人在群里认识的小伙伴有的不会用scss,所以就借着放假的机会来对scss语法做......