feat: 优化音量面板关闭逻辑,增加外部点击判断
This commit is contained in:
@@ -63,10 +63,16 @@ export default function PageHeader() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 点击面板外部 → 关闭音量面板
|
||||
// 点击音量容器(按钮+面板)外部 → 关闭面板;
|
||||
// 用「目标是否在容器内」判断,避免面板内滑块交互(pointerdown)误关弹窗
|
||||
const volWrapRef = useRef(null);
|
||||
useEffect(() => {
|
||||
if (!volOpen) return undefined;
|
||||
const close = () => setVolOpen(false);
|
||||
const close = (e) => {
|
||||
if (volWrapRef.current && !volWrapRef.current.contains(e.target)) {
|
||||
setVolOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('pointerdown', close);
|
||||
return () => document.removeEventListener('pointerdown', close);
|
||||
}, [volOpen]);
|
||||
@@ -154,7 +160,7 @@ export default function PageHeader() {
|
||||
{/* 媒体轮播页:页眉内嵌播放控制 */}
|
||||
{location.pathname === '/screen' && <MediaHeaderControls />}
|
||||
{/* 音量控制(媒体 + 音效) */}
|
||||
<div className="bd-vol-wrap">
|
||||
<div className="bd-vol-wrap" ref={volWrapRef}>
|
||||
<button
|
||||
className={`bd-vol-btn${mediaVol === 0 ? ' muted' : ''}`}
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user