Prevent image's default right-click behavior and show a custom dialog

Author: apqx

_layouts/post.html

@@ -33,7 +33,7 @@ <h1 data-pagefind-meta="title" class="post-title">{{ page.title }}</h1>
                 {%- if page.categories contains "opera" %}
                 <blockquote data-pagefind-ignore="all">
                     <p>
-                        节省数据流量，本页为缩略图，点击可跳转到高清原图。我自己不喜欢水印，猜测大概别人也不喜欢，所以更愿意分享纯净剧照，只是注意图片版权归属作者及剧团演员所有，未经允许不可作商业用途🤫。
+                        节省数据流量，本页为缩略图，点击可跳转到高清原图。我不喜欢水印更愿意分享纯净剧照，只是注意图片版权归属作者及剧团演员所有，未经允许不可作商业用途🤫。
                     </p>
                 </blockquote>
                 <blockquote class="pre" data-pagefind-ignore="all">

npm/dist/blog-index-v2.0.0.js

@@ -9,6 +9,7 @@ runOnHtmlDone(() => {
     initCodeHighlight()
     initPageCheck()
     initImgJump()
+    initImg()
 })
 
 function initCodeHighlight() {
@@ -61,3 +62,13 @@ function showCopyrightDialog(url: string) {
             window.open(url, "_blank")
         })
 }
+
+function initImg() {
+    // 右键点击图片时，阻止弹出默认的右键菜单，而是弹出自定义提示
+    document.addEventListener("contextmenu", (event) => {
+        if (event.target instanceof HTMLImageElement) {
+            event.preventDefault();
+            showAlertDialog("提示", "节省数据流量文中是缩略图，点击图片可以跳转到原图。", "OK", () => {})
+        }
+    })
+}

npm/dist/blog-post-v2.0.0.js

@@ -119,6 +119,8 @@ footer * {
 
 img {
     display: block;
+    // 阻止移动端 Safari 长按图片弹出菜单
+    -webkit-touch-callout: none;
 }
 
 img.inline-for-center {