一般情况下，CSS不会影响JS事件，但是CSS有一个特殊的属性pointer-events，可以用来避免鼠标事件，其中大部分的值是只对SVG（ScalableVectorGraphics）操作可用，我们只需要关注它的none属性值，也就是鼠标事件“看穿”元素，指定元素“下方”的任何东西。我们经常会遇到设置半透明遮罩的需求。通常，div绝对定位以覆盖元素。这时候遮罩层的鼠标事件优先级会更高，以至于被遮罩的元素无法进行正常的交互行为。,此时只需要设置pointer-events:none;到面具“穿透”面具与元素互动。重点是，由于该属性可以防止元素成为鼠标事件，所以在页面修改该属性的值为none可以防止鼠标在滚动过程中频繁触发包括hover在内的任何鼠标事件，从而提高页面滚动的性能.body{pointer-events:none;}使用滚动监听事件来灵活控制：eventif(timer){clearTimeout(timer)}timer=setTimeout(()=>{document.body.style.pointerEvents='auto';//Release},100);})如果是移动网页，有是不是鼠标事件不能使用上面的属性来优化滚动？确实不可以，但是移动端还有一个特殊的属性也是一样的，那就是touch-action。顾名思义，该属性用于设置触摸屏如何操作元素区域的动作。同样touch-action可以在移动端禁止浏览器对手势事件的处理，从而提高页面滚动性能，也可以解决移动端点击延迟的问题（很多人可能只知道viewportmetatag或者fastclick).不过需要注意的是，虽然这个属性也有一个none的值，但是这里并不适用，因为“滚动”也是一种手势，应该使用manipulation的值，表示只有滚动和连续允许缩放操作，即，相当于禁用其他页面手势。全局效果应该写在html上：html{touch-action:manipulation;}同样，如果移动端有自定义拖动的需求，也可以使用这个CSS来优化性能。当我们需要完全阻止原生触摸事件时，JS将touch-action设置为none，无需恢复。//主动触发禁用全局手势document.documentElement.style.touchAction='none'//独立禁用某个区域的手势操作document.getElementById('xxx').style.touchAction='none'//没有时恢复需要，例如处理document.addEventListener('touchend',function(event){document.documentElement.style.touchAction='manipulation'//orauto});可能有的朋友会问，如果我们在touchstart或者touchmove事件中使用event.preventDefault()来阻止系统默认事件，是不是就可以阻止手势操作呢？preventDefault()可以阻止默认事件，当然也包括手势事件，但是如果直接在windiw文档体中使用，不仅没有效果，浏览器还会报红字严重错误，因为触摸监听事件都是先执行的。"来执行回调。如果需要阻塞默认事件，必须在触摸开始前检查是否需要阻塞。滑动响应的优先级反而降低了。谷歌为了保证流畅，默认取消了这个机制所以从chrome56开始，如果不在全局触摸事件中声明这是一个“非被动”操作，那么chrome浏览器默认是不会执行的，会报错。window.addEventListener('touchmove',e=>e.preventDefault())//无效，错误window.addEventListener('touchmove',e=>e.preventDefault(),{passive:false})//有效提示:vue中有这么一个修饰符，讲的是同一个东西，这时候touch-action就派上用场了。相当于先声明元素可用的触摸事件，这样浏览器就不会报错了。preventDefault()也不会影响触摸事件，两者可以结合使用。(touch-action:none会阻止任何触摸行为，但触摸事件正常触发)//下面代码的效果：阻止滑动时系统默认事件，页面可以正常滑动document.documentElement.style.touchAction='manipulation'window.addEventListener('touchmove',e=>e.preventDefault())//把manipulation值改成none，彻底阻止默认的滑动事件。这取决于实际情况。毕竟touch-action的可选值有很多传送门：MDN-CSS-pointer-eventsMDN-CSS-touch-action以上就是文章的全部内容，希望对大家有所帮助！觉得文章写得好，可以点赞收藏。也欢迎您关注。我会持续更新更多有用的前端知识和实用技巧。一日茶无味，愿与你共同成长~
