「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」
前言
在这坚持更新有很多理由，不单单是为了薅羊毛（嘘~）。背景是本人刚刚入行，很多知识都还不会，借这个契机逼自己多学多看多想，但是可能总结出来的知识在很多经验丰富的人眼里过于简单。不过不能因此就拒绝分享，只要总结出来的知识是正确的，无论简单与否总能在某些时候起一些作用的吧！坚持一定比放弃酷，共勉~
今天还学前端相关的知识点：pointer-events
pointer-events:none
这个属性非常常用，上述声明可以让元素无视点击、鼠标悬停和拖拽等行为。但是不推荐用它来实现按钮的禁用效果。
- pointer-events：none 并不能阻止键盘行为 设置pointer-events：none 的效果只是部分禁用，因为按钮元素仍然可以通过Tab键被focus聚焦，并且可以在focus的状态下通过Enter键触发点击事件。
- pointer-events：none 影响无障碍访问
比如说在按钮被禁用的情况下，用title属性或者其它提示组件可以在鼠标指针悬停在按钮上是显示禁用的原因，但是如果设置了上述属性，就无法显示这样的提示效果。
即：pointer-events：none 不适合用于链接、按钮等控件元素，对于按钮设置禁用的最好方法就是用disabled属性。
继承性的妙用
pointer-events属性的继承性在一些时候很管用。比如：有一个带遮罩的弹框，遮罩的覆盖层不能影响弹窗的点击功能。这个时候可以这么做：
<dialog>
<div class="container"> 弹框点击部分 </div>
</dialog>
dialog{
pointer-events:none;
}
.container{
pointer-events: auto;
}
也就是利用它的继承性，子元素的属性值覆盖祖先元素的pointer-events属性值，于是虽然覆盖了弹框，但是弹框仍然可以点击。
总结
pointer-events还有很多其它属性值，下次再仔细地研究一下~
