浅谈css3属性pointer-events: none和will-change和user-select

1、pointer-events: none

pointer-events: none； 可以让某个元素实现类似于海市蜃楼的效果，具体理解为，你可以看的到某个元素，但是你无法摸的着。

而display：none; 是你摸不着，但是你也看不见。

pointer-events: none；摸不着，但是看得见。如果把某个元素再加上opacity：0；则可以很容易实现类似display:none；的效果（摸不着，看不见）。

pointer-events属性的兼容性：
CSS pointer-events属性（只适用于HTML）
此CSS属性设置为“none”时，允许元素不接收悬停/单击事件，而事件将发生在其后面的任何内容上。

支持以下版本：

2、will-change

CSS3 will-change提高页面动画等渲染性能。

will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高CSS动画的执行效率。

这个属性可以有4个值：

auto: 实行标准浏览器优化。
scroll-position: 指明元素的滚动位置将会出现动画变化，浏览器应该为滚动视窗内容的不可见部分事先做好准备。
contents: 指明元素的内容将会发生变化，浏览器不要缓存它们的内容。
: 指明will-change实施的目标属性，比如transform 或 opacity。
如果想通知浏览器会发生一个transform方面的变化，可以这样写：

.element {
	will-change: transform;
}

我们还可以指定多个值，用逗号分隔，例如：

.element {
	will-change: transform, opacity;
}

然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它。

3、user-select

语法：
user-select：none |text| all | element

默认值：text

适用于：除替换元素外的所有元素

继承性：无

动画性：否

计算值：指定值

取值：
none：
文本不能被选择
text：
可以选择文本
all：
当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：
可以选择文本，但选择范围受元素边界的约束

说明：
设置或检索是否允许用户选中文本。
IE6-9不支持该属性，但支持使用标签属性 onselectstart=“return false;” 来达到 user-select:none 的效果；Safari和Chrome也支持该标签属性；
直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable=“on” 来达到 user-select:none 的效果；unselectable 的另一个值是 off；
除Chrome和Safari外，在其它浏览器中，如果将文本设置为 -ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本；
对应的脚本特性为userSelect。

实例：

    
    
    
    
    
    
    
    
    
    
    
选择我试试，你会发现怎么也选择不到我，哈哈哈哈
    
    

4、小demo

    
    
    


    

        
邮箱