diff --git a/resources/js/chat-room.js b/resources/js/chat-room.js index d3d298b..a681207 100644 --- a/resources/js/chat-room.js +++ b/resources/js/chat-room.js @@ -2,7 +2,7 @@ export { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js"; export { applyFontSize, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js"; -export { closeChatImageLightbox, openChatImageLightbox } from "./chat-room/lightbox.js"; +export { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js"; export { BLOCKABLE_SYSTEM_SENDERS, BLOCKED_SYSTEM_SENDERS_STORAGE_KEY, @@ -22,7 +22,7 @@ export { createMessageQueue } from "./chat-room/message-queue.js"; import { escapeHtml, escapeHtmlWithLineBreaks } from "./chat-room/html.js"; import { applyFontSize, CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize } from "./chat-room/font-size.js"; -import { closeChatImageLightbox, openChatImageLightbox } from "./chat-room/lightbox.js"; +import { closeChatImageLightbox, initChatImageLightboxEvents, openChatImageLightbox } from "./chat-room/lightbox.js"; import { BLOCKABLE_SYSTEM_SENDERS, BLOCKED_SYSTEM_SENDERS_STORAGE_KEY, @@ -48,6 +48,7 @@ if (typeof window !== "undefined") { CHAT_FONT_SIZE_STORAGE_KEY, restoreChatFontSize, closeChatImageLightbox, + initChatImageLightboxEvents, openChatImageLightbox, BLOCKABLE_SYSTEM_SENDERS, BLOCKED_SYSTEM_SENDERS_STORAGE_KEY, diff --git a/resources/js/chat-room/lightbox.js b/resources/js/chat-room/lightbox.js index c8430b5..ec457d8 100644 --- a/resources/js/chat-room/lightbox.js +++ b/resources/js/chat-room/lightbox.js @@ -1,4 +1,6 @@ -// 聊天室图片预览层控制,迁出 Blade 内联脚本后仍通过 window 全局函数兼容现有 onclick。 +// 聊天室图片预览层控制,迁出 Blade 内联脚本后通过事件委托接管打开和关闭。 + +let lightboxEventsBound = false; /** * 打开聊天图片大图预览层。 @@ -52,3 +54,42 @@ export function closeChatImageLightbox(event = null) { document.body.style.overflow = ""; } + +/** + * 绑定聊天图片预览层事件委托。 + * + * @returns {void} + */ +export function initChatImageLightboxEvents() { + if (lightboxEventsBound) { + return; + } + + lightboxEventsBound = true; + document.addEventListener("click", (event) => { + if (!(event.target instanceof Element)) { + return; + } + + const imagePreview = event.target.closest("[data-chat-image-lightbox-image]"); + if (imagePreview) { + return; + } + + const opener = event.target.closest("[data-chat-image-lightbox-open]"); + if (opener) { + event.preventDefault(); + openChatImageLightbox(opener.dataset.full || opener.href, opener.dataset.alt || "聊天图片"); + return; + } + + if (event.target.closest("[data-chat-image-lightbox-close]")) { + event.preventDefault(); + closeChatImageLightbox(); + } + }); +} + +if (typeof document !== "undefined") { + initChatImageLightboxEvents(); +} diff --git a/resources/views/chat/frame.blade.php b/resources/views/chat/frame.blade.php index c750ee1..dc605cb 100644 --- a/resources/views/chat/frame.blade.php +++ b/resources/views/chat/frame.blade.php @@ -186,15 +186,15 @@ {{-- 聊天图片大图预览层 --}}