css pointer-events property

I learn css pointer-events property today !

好久没答题了，今天放假想以答题开始愉快的学习。看到这样一个问题。问题比较是比较常见的问题，但是看到一个比较有趣的答案：

Here you go with one more way to do it using pointer-events as none https://jsfiddle.net/w2wnuyv6/1/

$('a[value="cancel"]').click(function(){
    $(this).css({
        'pointer-events': 'none'
    });
});

之前从来没有见过pointer-events这个属性，学习到了新姿势。

pointer-events属性

pointer-events的值很多，大部分只能应用于svg元素。除了这些只剩两个属性了，auto和none。auto即是默认效果，和未指定时一样，主要讨论值为none的情况。

MDN对pointer-events属性为none的解释是 元素永远不会成为鼠标事件的target 。即所有依赖鼠标的效果(比如js中的click事件，css中的hover伪类等等)都不会在该元素上发生。
不过假如其后代元素的pointer-events的属性不为none，鼠标事件会冒泡到父元素，此时该元素上的鼠标事件监听器函数还是会被触发 => demo。

详细的介绍可以看下面的链接：

• MDN
• 张鑫旭博客
• 兼容性