重复问题
- 我搜索了现有的问题
最新版本
- 我测试了最新版本
重现步骤 🕹
链接到实时示例： https://codesandbox.io/s/hardcore-silence-ywxfbo?file=/src/App.js
步骤：
- 停止滑块的父元素上的"mousemove"事件传播，即
onMouseMove={(e) => e.stopPropagation()} - 尝试拖动滑块的滑块
当前行为 😯
滑块滑块无法拖动。
预期行为 🤔
无论是否在滑块的某个父元素上阻止事件传播，滑块都应该正常工作。
上下文 🔦
滑块组件有一个需要阻止事件传播的父元素。我不能使用滑块(难过)
你的环境 🌎
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
3条答案
按热度按时间x8diyxa71#
我们在
document上设置了一个mousemove事件处理器，这样当用户在拖动过程中指针离开滑块区域时，我们仍然可以检测到移动。我认为一旦滑块被点击，我们可以在所有内容的顶部覆盖一个不可见的div,用它来检测鼠标移动。这样一来，事件就不需要一路传播回document了。cc @mui/core 寻求意见
axzmvihb2#
可能有趣的是再次回顾指针捕获。这就是我们在这里有效地填充的内容。但是我当时没有追求，因为浏览器的bug或者缺乏支持。所以根据你支持的浏览器，检查Pointer Events和
setPointerCapture可能是值得的。mwg9r5ms3#
好的点，谢谢。
从我们针对的浏览器来看，只有iOS Safari 12.5似乎不支持指针捕获( https://caniuse.com/mdn-api_element_setpointercapture )。我们肯定会修改v6支持的浏览器，所以我们应该能够在没有polyfills的情况下实现这个功能。