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

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

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浮动兄弟元素高度问题