双范围输入框点击报错：Unable to preventDefault inside passive event listener

错误原因 #

这个报错的核心是：你在被动事件监听器里调用了event.preventDefault()，但被动监听器的设计就是不允许阻止浏览器默认行为。

现代浏览器为了优化滚动、触摸这类高频事件的性能，会默认将touchstart、touchmove这类事件的监听器设为passive（被动模式）。在这种模式下，浏览器不用等待监听器执行完毕，就能直接处理自身的默认行为（比如页面滚动），避免出现卡顿。而你的双范围输入框的handleTouchStart方法（track.jsx第164行）里调用了preventDefault()，触发了浏览器的限制逻辑，所以抛出错误。

解决方法 #

• 调整事件监听器配置：如果你的业务逻辑确实需要阻止默认行为，要将对应的事件监听器显式设置为非被动。比如用原生addEventListener绑定事件时，添加{ passive: false }参数：

element.addEventListener('touchstart', handleTouchStart, { passive: false });

如果是React组件内绑定事件（比如用onTouchStart），确认是否使用了第三方滑块组件，有的话查看组件文档，通常会提供禁用被动监听器的配置选项。

• 移除不必要的preventDefault()：如果调用preventDefault()没有实际业务需求（比如不需要阻止触摸时的页面滚动），直接删掉这个调用即可解决报错。

• 针对双范围滑块场景优化：这类组件的触摸事件通常是为了拖拽调整范围，若需要阻止页面滚动，确保事件监听器被设置为非被动模式，让preventDefault()能正常生效。

内容的提问来源于stack exchange，提问作者Isa Quliyev