图片轮播切到视频后左右键失效 (#57)
用户 2026-11-05:「行程里面图片轮播的时候,切换到视频,上下左右键就失效了。」
根因:键盘处理里有 isImage() 判断,只有当前是图片才翻页:
if (e.key === ArrowLeft && isImage()) { step(-1); }
切到视频后 isImage() 为 false,两个分支都进不去。
当初这么写是因为「视频/PDF 里方向键另有含义,不能抢」——
顾虑是对的(视频左右键是快退/快进),但解法错了:
一刀切禁掉,而不是看焦点在哪。
修法:改成判断事件目标
function inMediaControl(t) { return !!t.closest("video, iframe"); }
if (inMediaControl(e.target)) { return; } // 放行给控件
其余情况照常翻页,不再限制只有图片
行为矩阵:
焦点在 video 里 → 视频快退/快进(不被抢)
焦点在 PDF iframe 里 → PDF 自己翻页(不被抢)
焦点在别处 / 视频未聚焦 → 上一张 / 下一张
上下键保持不处理:页面滚动、视频音量另有含义。
This commit is contained in:
+31
-5
@@ -186,9 +186,28 @@
|
||||
cur = -1;
|
||||
}
|
||||
|
||||
/** 正在看的是不是图片(视频/PDF 里方向键另有含义,不能抢) */
|
||||
function isImage() {
|
||||
return items[cur] && (items[cur].getAttribute('data-prev') || '') === 'image';
|
||||
/**
|
||||
* 按键是否发生在**媒体控件内部**(视频 / PDF iframe)。
|
||||
*
|
||||
* 🔴 #58(用户 2026-11-05):「行程里面图片轮播的时候,切换到视频,
|
||||
* 上下左右键就失效了。」
|
||||
*
|
||||
* 原来的写法是 `if (e.key === 'ArrowLeft' && isImage())` ——
|
||||
* 只有**当前是图片**才翻页,切到视频后左右键直接失效。
|
||||
*
|
||||
* 当年这么写的顾虑(注释原文)是「视频/PDF 里方向键另有含义,不能抢」,
|
||||
* 这个顾虑对:视频的左右键是快退/快进,PDF 里是翻页。
|
||||
*
|
||||
* 但**一刀切禁掉**是错的解法。正确做法是看**事件目标**:
|
||||
* · 按键发生在 video/iframe 内部 ⇒ 让它自己处理(快进、翻页)
|
||||
* · 按键发生在别处(背景、标题栏)⇒ 照常翻页
|
||||
*
|
||||
* ⚠️ 视频**没聚焦**时 `e.target` 往往是 `<body>` ——
|
||||
* 这时用户没在操作视频,就是想换下一张,应该翻页。
|
||||
*/
|
||||
function inMediaControl(t) {
|
||||
if (!t || !t.closest) { return false; }
|
||||
return !!t.closest('video, iframe');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
@@ -210,7 +229,14 @@
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (box.hidden) { return; }
|
||||
if (e.key === 'Escape') { close(); return; }
|
||||
if (e.key === 'ArrowLeft' && isImage()) { e.preventDefault(); step(-1); return; }
|
||||
if (e.key === 'ArrowRight' && isImage()) { e.preventDefault(); step(1); }
|
||||
|
||||
/* #58:焦点在视频/PDF 控件里 ⇒ 放行给控件(快进、PDF 翻页)。
|
||||
这样"视频里左右键是快进"和"轮播里左右键是翻页"**不冲突**。 */
|
||||
if (inMediaControl(e.target)) { return; }
|
||||
|
||||
/* 其余情况:左右键翻页 —— **不再限制只有图片才能翻**。
|
||||
⚠️ 上下键保持不处理:页面滚动/视频音量另有含义,抢了会别扭。 */
|
||||
if (e.key === 'ArrowLeft') { e.preventDefault(); step(-1); return; }
|
||||
if (e.key === 'ArrowRight') { e.preventDefault(); step(1); }
|
||||
});
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user