非常有用的pointer-events属性

男娘i 2023-10-07 20:11 10阅读 0赞

pointer-events是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）

### 属性值 ###

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

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>/* Keyword values */</code></p> <p><code>pointer-events: auto;&nbsp;/* 默认 */</code></p> <p><code>pointer-events: none;</code></p> <p><code>pointer-events: visiblePainted;&nbsp;/* SVG only */</code></p> <p><code>pointer-events: visibleFill;&nbsp;&nbsp;/* SVG only */</code></p> <p><code>pointer-events: visibleStroke;&nbsp;&nbsp;/* SVG only */</code></p> <p><code>pointer-events: visible;&nbsp;&nbsp;/* SVG only */</code></p> <p><code>pointer-events: painted;&nbsp;&nbsp;/* SVG only */</code></p> <p><code>pointer-events: fill;&nbsp;&nbsp;/* SVG only */</code></p> <p><code>pointer-events: stroke;&nbsp;&nbsp;/* SVG only */</code></p> <p><code>pointer-events: all;&nbsp;&nbsp;/* SVG only */</code></p> <p><code>/* Global values */</code></p> <p><code>pointer-events: inherit;</code></p> <p><code>pointer-events: initial;</code></p> <p><code>pointer-events: unset;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### pointer-events属性值详解 ###

*  auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
 *  none——元素永远不会成为鼠标事件的[target][]（目标）。但是，当其后代元素的`pointer-events`属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默

认就可以穿透当前层，因为pointer-events默认为auto

### 浏览器兼容性 ###

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性**但是**HTML中不支持。

检测浏览器是否支持该属性的JS代码，其实也可以用来检测其他的属性

<table> 
 <tbody> 
  <tr> 
   <td> <pre>var supportsPointerEvents = (function(){
  var dummy = document.createElement('_');
  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';
  document.body.removeChild(dummy);
  return r;
})();</pre> </td> 
  </tr> 
 </tbody> 
</table>

#### 为什么要设置两次pointerEvents的属性呢？ ####

dummy.style.pointerEvents = ‘auto’;

dummy.style.pointerEvents = ‘x’;

解读：明显的是x会把之前赋值的auto覆盖掉，后面用了getComputedStyle这个方法。由于x是个无效的值，所以如果浏览器支持pointer-event这个css属性的话，计算出来的样式应该是auto。

#### 使用JS替代实现pointerEvents穿透当前层的效果 ####

<table> 
 <tbody> 
  <tr> 
   <td> <pre>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).trigger(evt.type);
    });
}</pre> </td> 
  </tr> 
 </tbody> 
</table>

elementFromPoint：返回给定坐标处的所在的元素

使用实例：document.elementFromPoint(100,100)

trigger：触发被选元素指定的事件类型

event.type：返回事件类型

### 实例一 ###

#### 案例一：穿透当前层 ####

在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div或者其它元素一般都会给个宽高，或者relative的元素可以不给宽高，这个时候，这些元素就会盖

住下面的地图层，以至于地图层无法操作。。。或者是用来做全局页面水印效果![8e6e11e1255a4c9b8a211b957cccbd02.png][]

然后正好在Google map见到了类似的问题，拿来当例子来说：

![859f687bdd9b3b4330d79079dcf7090a.jpeg][]

Google map中左上角的操作区域占位是挺大的，如红色框区域，然后在这个区域是无法操作地图层的。那么我们就可以**给这个div设置 pointer-events:none**，然后你就会发现下面的地图就可以拖动和点击了。

但是悲剧的是，操作区域本身却无法操作了，直接被无视掉了。不过不用担心，我们可以**给里面的元素重新设置为 pointer-events:auto**，当然，只给需要操作的元素区域设置。

貌似有点儿纠结，不过这样可以保证地图本身的可操作区域最大化。

### 实例二：pointer-events 可以禁用 HTML 元素的 hover/focus/active 等动态效果。 ###

案例一：禁用 a 标签事件效果

在做 tab 切换的时候，当选中当前项，禁用当前标签的事件，只有切换其他 tab 的时候，才重新请求新的数据。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <ul> 
     <li> <pre><code> &lt;!--CSS--&gt;
 &lt;style&gt;
     .active{
         pointer-events: none;
     }
 &lt;/style&gt;
 &lt;!--HTML--&gt;
 &lt;ul&gt;
     &lt;li&gt;&lt;a class="tab"&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="tab active"&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a class="tab"&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;复制代码</code></pre> </li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

案例二：切换开/关按钮状态

点击提交按钮的时候，为了防止用户一直点击按钮，发送请求，当请求未返回结果之前，给按钮增加 pointer-events: none，可以防止这种情况，这种情况在业务中也十分常见。

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;&lt;!--CSS--&gt;</p> <p>.j-pro{ pointer-events: none; }</p> <p>&lt;!--HTML--&gt;</p> <p>&lt;button r-model={this.submit()} r-class={ {"j-pro": flag}}&gt;提交&lt;/button&gt;</p> <p>&lt;!--JS--&gt;</p> <p>submit:&nbsp;function(){ </p> <p>　　this.data.flag =&nbsp;true;</p> <p>　　this.$request(url, { </p> <p>　　　　// ... onload:&nbsp;function(json){ </p> <p>　　　　　　　　if(json.retCode == 200){ </p> <p>　　　　　　　　　　this.data.flag =&nbsp;false;</p> <p>　　　　　　　　} }.bind(this)</p> <p>　　　　// ...</p> <p>　　});</p> <p>}</p> </td> 
  </tr> 
 </tbody> 
</table>

案例三：防止透明元素和可点击元素重叠不能点击

一些内容的展示区域，为了实现一些好看的 css 效果，当元素上方有其他元素遮盖，为了不影响下方元素的事件，给被遮盖的元素增加 pointer-events: none; 可以解决。

<table> 
 <tbody> 
  <tr> 
   <td> <p>&nbsp;&lt;!--CSS--&gt;</p> <p>.layer{ backround: linear-gradient(180deg,&nbsp;#fff, transparent); }</p> <p>.j-pro{ poninter-events: none; }</p> <p>&lt;!--HTML--&gt;</p> <p>&lt;ul&gt;</p> <p>　　&lt;li class="layer j-pro"&gt;&lt;/li&gt;</p> <p>　　&lt;li class="item"&gt;&lt;/li&gt;</p> <p>　　&lt;li class="item"&gt;&lt;/li&gt;</p> <p>　　&lt;li class="item"&gt;&lt;/li&gt;</p> <p>&lt;/ul&gt;&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

[target]: https://developer.mozilla.org/en-US/docs/Web/API/event.target
[8e6e11e1255a4c9b8a211b957cccbd02.png]: https://img-blog.csdnimg.cn/8e6e11e1255a4c9b8a211b957cccbd02.png
[859f687bdd9b3b4330d79079dcf7090a.jpeg]: https://img-blog.csdnimg.cn/img_convert/859f687bdd9b3b4330d79079dcf7090a.jpeg