FloatingPanel组件 上下拉动时 出现 Unable to preventDefault inside passive event listener invocation

[192114]

Version of antd-mobile

5.32.0

Operating system and its version

Android

Browser and its version

最新chrome内核

Sandbox to reproduce

https://codesandbox.io/p/github/192114/am-demo/draft/staging-sea?file=%2F.codesandbox%2Ftasks.json%3A1%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clkw1gvkq000h356pdwqi9xuk%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clkw1gvkq000c356pm3douvwy%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clkw1gvkq000g356p8e11zcba%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clkw1jw2r00ke356psxgtvn30%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clkw1gvkq000c356pm3douvwy%2522%253A%257B%2522id%2522%253A%2522clkw1gvkq000c356pm3douvwy%2522%252C%2522activeTabId%2522%253A%2522clkw1ip78023x356pddcv5do6%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clkw1gvkp000b356pqsezb9ok%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522clkw1ip78023x356pddcv5do6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clkw1gvkq000g356p8e11zcba%2522%253A%257B%2522id%2522%253A%2522clkw1gvkq000g356p8e11zcba%2522%252C%2522activeTabId%2522%253A%2522clkw1h3yo00mh356p4plum2x9%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clkw1gvkq000f356p2yiy6qww%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clkw1gwz1000nhlfwg8my40cm%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clkw1h3yo00mh356p4plum2x9%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clkw1jw2r00ke356psxgtvn30%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clkw1juzu00k5356ph6f0h627%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%252C%2522actionBarPosition%2522%253A%2522overlayed%2522%257D%255D%252C%2522id%2522%253A%2522clkw1jw2r00ke356psxgtvn30%2522%252C%2522activeTabId%2522%253A%2522clkw1juzu00k5356ph6f0h627%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

What happened?

控制台 Unable to preventDefault inside passive event listener invocation

"antd-mobile": "^5.32.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"

"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"

dist.zip build出来的产物

开发环境下 拖动没有错误

生产环境下会出现该错误

Relevant log output

index-b0508775.js:44 Unable to preventDefault inside passive event listener invocation.
J_.axis @ index-b0508775.js:44
emit @ index-b0508775.js:44
pointerUp @ index-b0508775.js:44

[1587315093]

启动了dist包 复现了

useLockScroll 的问题，里面 { passive: true } 和 event.preventDefault() 同时成立会报警告

https://github.com/ant-design/ant-design-mobile/blob/master/src/utils/use-lock-scroll.ts#L78
https://github.com/ant-design/ant-design-mobile/blob/master/src/utils/use-lock-scroll.ts#L48

如果一个事件监听器被标记为 passive（即 { passive: true }），而在这个监听器中又调用了 event.preventDefault() 方法来阻止默认行为，就会在控制台中报错，提示 "Unable to preventDefault inside passive event listener invocation"。

这是因为被标记为 passive 的事件监听器是为了优化性能而设计的，浏览器会假设这些监听器不会调用 event.preventDefault() 方法，以提高事件处理的速度和流畅度。如果在这些监听器中调用了 event.preventDefault() 方法，浏览器会忽略这个操作并报错。