小编给大家分享一下如何利用css属性来屏蔽键盘干扰。 希望您读完本文后有所收获。 下面就让我们一起来解释一下吧！
来源：前几天，一个测试发送了一个请求，需要看图片的内容：
听到这个需求，我有点困惑。 目前的情况是，只有当点击日期内容框的空白区域时，才会显示下拉日期菜单，以应对点击风暴。
并且这个icon图标绝对定位在日期内容框中，它的视口尺寸低于日期内容框，当点击icon图标时，不会响应点击风暴。 我的第一反应是点击暴风雨，但是如何实现呢？ 我觉得我已经遇到了我仍然忽略的知识盲点。
迷迷糊糊中，我像老虎一样操作，开始为微软编程……
事实证明，科学上网非常重要，微软准确>百度准确，再次抱怨百度的广告……
为了解决icon图标覆盖的内容框区域也能响应点击风暴的问题，可以使用poniter-events的css属性来实现。
poniter-events属性的值有很多，但大部分都和svg相关，可以直接跳过。 有两个常见的属性值：none|auto。
auto：与未指定pointer-events属性时的效果相同。 none：该元素永远不会成为键盘风暴的目标。 并且，当其后代元素的pointer-events属性指定其他值时，键盘事件可以指向后代元素，在这些情况下，键盘事件将在catch或bubble阶段触发父元素的事件监听器。
然后注意poniter-events的兼容性：
桌面浏览器
IE：11+（不支持IE6~IE10） Firefox：3.6+Chrome：4.0+Safari：6.0Opera：15.0
联通设备浏览器
iOSSafari: 6.0Android浏览器: 2.1+AndroidChrome: 18.0+
听到这里，我这次遇到的问题基本可以解决了：
解决完问题之后，新的问题又出现了，不仅仅是让鼠标点击穿透内层css屏蔽，还有poniter-events的常见应用场景有哪些？
考虑到none值的影响，应该可以取消风波的点击行为。 例如：使a标签链接不可点击、避免多次按钮点击、重复表单提交等。此外，肯定还有很多其他应用可以通过属性值来探索。
看完这篇文章css屏蔽，相信你对“如何利用css属性屏蔽键盘干扰”有了一定的了解。 如果您想了解更多，请关注易速云行业资讯频道，感谢您的阅读！
