diff --git a/assets/js/preview.js b/assets/js/preview.js index 9cafb9c..17b0c64 100644 --- a/assets/js/preview.js +++ b/assets/js/preview.js @@ -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` 往往是 `` —— + * 这时用户没在操作视频,就是想换下一张,应该翻页。 + */ + 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); } }); })();