point-events的作用可以让元素无视点击、鼠标悬停和拖拽行为。但是不建议用来禁用按钮。所以point-events:none不适合链接、按钮等控件元素，而适合作用在装饰性或仅用作视觉表现的非控件元素上，比如一些覆盖元素不影响下层元素正常的操作。

<button></button>
<style>
    .warpper.disabled {
        point-events: none;
    }
</style>
 

其中point-events: none不能阻止键盘行为，按钮元素依然可以通过tab键被focus聚焦，并且可以在focus聚焦状态下通过enter键触发点击事件，就是我们用point-events: none并不是真正意义的禁用，而只是实现了部分禁用效果。point-events:none也就影响无障碍访问，比如我们在按钮禁用的时候，可以通过title属性或其他提示组件在鼠标指针悬停在按钮上时显示禁用的原因。如果我们设置了，则不会显示这些提示效果。在移动端时如果我们设置了该属性，那么移动端无障碍阅读是通过触摸触发的将会被影响识别效果。所以对于按钮效果，我们设置禁用最好使用的方法就是原生的disabled属性，然后配合:disabled伪类实现。

point-events属性具有继承性，当我们父元素和子元素都设置了point-events属性值，那么子元素的point-events属性会覆盖祖先元素的point-events属性值。除了none还有其他属性值。除了auto和none这两个关键字，其他关键字都是用于svg元素上的。visible只要元素显示，任意描边或填充区域都可以响应鼠标事件。visiblePainted作用是只要肉眼可见的有描边或有填充的地方都可以响应鼠标事件。visibleFill作用是鼠标指针经过svg元素的描边区域不会有任何鼠标响应事件发生。painted作用是可以影响鼠标事件的，比如点击或者悬停效果。fill作用是鼠标一样可以点击填充区域，关键字不需要svg元素的visibility计算值是visible，就算visibility计算值是hidden。stroke描边区域也能响应鼠标事件，填充区域则不能响应鼠标事件。all和painted关键字区别在于，painted关键字需要fill或者stroke的属性值不是none，而all关键字没有这个限制。

    point-events: auto;
    point-events: visible;
    point-events: fill;