如何將網頁鎖右鍵、拖曳、長按另存圖片

2023 年 8 月 13 日

URLをコピーしました！

大多人在某些網站瀏覽看到圖片很不錯，想要另存圖片，但只有極少數的特定網站裡圖片有版權問題，不想被人家另存圖片去另做出什麼行為。

要如何禁止另存圖片，是方法有很多種，但除了鎖桌上型電腦裝置之外，也要鎖手機行動裝置的話，倒是有方法可以鎖住。

CSS 鎖住另存圖片

透過 CSS 禁止 User 點選、右鍵另存圖片選單、以及拖曳功能

img {
    pointer-events: none; //禁止none, 啟用auto
}

jQuery 鎖住另存圖片

鎖住 onmousedown 事件，在事件觸發時，將禁止預設行為

$(function () {
    $(‘img’).attr(‘onmousedown’, ‘return false’);
    $(‘img’).attr(‘onselectstart’, ‘return false’);
    $(‘img’).attr(‘oncontextmenu’, ‘return false’);
});

HTML5 鎖住另存圖片

在 body 加入 contextmenu 屬性，將禁止右鍵選單

<body oncontextmenu=”return false”>

總結

這是預防措施，但是不代表可 100% 可以鎖住另存圖片，如有需求，可以加入 code 來採取鎖住，可以試試看囉~

如果喜歡文章，歡迎分享~！よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！