图片轮播切到视频后左右键失效 (#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:
2026-11-05 13:19:05 +08:00
parent bee1d077d8
commit 306f5a61cb
+31 -5
View File
@@ -186,9 +186,28 @@
cur = -1; cur = -1;
} }
/** 正在看的是不是图片(视频/PDF 里方向键另有含义,不能抢) */ /**
function isImage() { * 按键是否发生在**媒体控件内部**(视频 / PDF iframe)。
return items[cur] && (items[cur].getAttribute('data-prev') || '') === 'image'; *
* 🔴 #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) { document.addEventListener('click', function (e) {
@@ -210,7 +229,14 @@
document.addEventListener('keydown', function (e) { document.addEventListener('keydown', function (e) {
if (box.hidden) { return; } if (box.hidden) { return; }
if (e.key === 'Escape') { close(); 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); }
}); });
})(); })();