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