div点击穿透,CSS属性pointer-events :none;实现护眼模式, 夜间模式遮罩

.div-xx{

pointer-events :none;/*取消事件,点击穿透*/

 }

pointer-events , css属性值

• auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

• none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

pointer-events 更像是JavaScript，它能够：

• 阻止用户的点击动作产生任何效果

• 阻止缺省鼠标指针的显示

• 阻止CSS里的 hover 和 active 状态的变化触发事件

• 阻止JavaScript点击动作触发的事件

实际代码使用中案例：style="pointer-events:none"

1、提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events:none"），来防止重复提交。 

2、一些层的绝对定位，覆盖按钮，穿透可以点击它。等等。

来看下具体用法：

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解

• auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

• none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

• 其它属性值为SVG专用，这里不再多介绍了。

 

应用

创建一个可点击穿透的遮罩,调暖色,实现护眼模式

js书签工具,夜间模式,护眼模式,  传参透明度,暖色深浅

javascript:(function(opacity){var opacity=opacity;var mask=document.createElement("div");mask.innerHTML=`<style>.filter-blue{z-index:2147483646;opacity:${opacity};mix-blend-mode:multiply;top:0px!important;left:0px!important;right:0px!important;bottom:0px!important;position:fixed!important;pointer-events:none!important;transition:opacity 0.15s ease 0s;background:rgb(255,185,105);overflow:hidden!important}</style>`;mask.className="filter-blue";document.body.appendChild(mask)})(0.6);