CSS-pointer-events⽔印层事件穿透
CSS - pointer-events ⽔印层事件穿透
属性值
pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可⽤，其它的⼏个是针对SVG的(本⾝这个属性就来⾃于SVG技术)。
/* Keyword values */
pointer-events: auto; /* 默认 */
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;  /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;  /* SVG only */
pointer-events: painted;  /* SVG only */
pointer-events: fill;  /* SVG only */
pointer-events: stroke;  /* SVG only */
pointer-events: all;  /* SVG only */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
auto——效果和没有定义pointer-events属性相同，⿏标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
none——元素永远不会成为⿏标事件的target（⽬标）。但是，当其后代元素的pointer-events属性指定其他值时，⿏标事件可以指向后代元素，在这种情况下，⿏标事件将在捕获或冒泡阶段触发⽗元素
的事件侦听器。实际上默认就可以穿透当前层，因为pointer-events默认为auto
浏览器兼容性
检测浏览器是否⽀持该属性的JS代码，其实也可以⽤来检测其他的属性
var supportsPointerEvents = (function(){
var dummy = ateElement('_');
if(!('pointerEvents' in dummy.style)) return false;
dummy.style.pointerEvents = 'auto';
dummy.style.pointerEvents = 'x';
document.body.appendChild(dummy);
var r = getComputedStyle(dummy).pointerEvents === 'auto';
veChild(dummy);
return r;
})();
为什么要设置两次pointerEvents的属性呢？
dummy.style.pointerEvents = ‘auto’;
dummy.style.pointerEvents = ‘x’;
解读：明显的是x会把之前赋值的auto覆盖掉，后⾯⽤了getComputedStyle这个⽅法。由于x是个⽆效的值，所以如果浏览器⽀持pointer-event这个css属性的话，计算出来的样式应该是auto。
使⽤JS替代实现pointerEvents穿透当前层的效果
function noPointerEvents (element) {
$(element).bind('click mouseover', function (evt) {
this.style.display = 'none';
var x = evt.pageX, y = evt.pageY,
under = document.elementFromPoint(x, y);
this.style.display = '';
evt.stopPropagation();
evt.preventDefault();
$(under).pe);
});
}
elementFromPoint：返回给定坐标处的所在的元素
使⽤实例：document.elementFromPoint(100,100)
trigger：触发被选元素指定的事件类型
css鼠标点击样式应⽤
穿透当前层
在某个项⽬中，很多元素需要定位在⼀个地图层上⾯，这⾥就要⽤到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上⾯的div或者其它元素⼀般都会给个宽⾼，或者relative的元素可以不给宽⾼，这个时候，这些元素就会盖
住下⾯的地图层，以⾄于地图层⽆法操作。。。
然后正好在Google map见到了类似的问题，拿来当例⼦来说：
Google map中左上⾓的操作区域占位是挺⼤的，如红⾊框区域，然后在这个区域是⽆法操作地图层的。那么我们就可以给这个div设置pointer-events:none，然后你就会发现下⾯的地图就可以拖动和点击了。
但是悲剧的是，操作区域本⾝却⽆法操作了，直接被⽆视掉了。不过不⽤担⼼，我们可以给⾥⾯的元素重新设置为 pointer-events:auto，当然，只给需要操作的元素区域设置。
貌似有点⼉纠结，不过这样可以保证地图本⾝的可操作区域最⼤化。
禁⽤ HTML 元素的 hover/focus/active 等动态效果
案例⼀：禁⽤ a 标签事件效果
在做 tab 切换的时候，当选中当前项，禁⽤当前标签的事件，只有切换其他 tab 的时候，才重新请求新的数据。
<!--CSS-->
<style>
.active{
pointer-events: none;
}
</style>
<!--HTML-->
<ul>
<li><a class="tab"></a></li>
<li><a class="tab active"></a></li>
<li><a class="tab"></a></li>
</ul>
案例⼆：切换开/关按钮状态
点击提交按钮的时候，为了防⽌⽤户⼀直点击按钮，发送请求，当请求未返回结果之前，给按钮增加 pointer-events: none，可以防⽌这种情况，这种情况在业务中也⼗分常见。
<!--CSS-->
.j-pro{ pointer-events: none; }
<!--HTML-->
<button r-model={this.submit()} r-class={{"j-pro": flag}}>提交</button>
<!--JS-->
submit: function(){
  this.data.flag = true;
  this.$request(url, {
    // ... onload: function(json){
        Code == 200){
          this.data.flag = false;
        } }.bind(this)
    // ...
  });
}
案例三：防⽌透明元素和可点击元素重叠不能点击
⼀些内容的展⽰区域，为了实现⼀些好看的 css 效果，当元素上⽅有其他元素遮盖，为了不影响下⽅元素的事件，给被遮盖的元素增加pointer-events: none; 可以解决。
<!--CSS-->
.layer{ backround: linear-gradient(180deg, #fff, transparent); }
.j-pro{ poninter-events: none; }
<!--HTML-->
<ul>
  <li class="layer j-pro"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。