首頁 > web前端 > 前端問答 > 聊聊利用jquery禁止圖片右鍵選單的方法

聊聊利用jquery禁止圖片右鍵選單的方法

PHPz
發布: 2023-04-10 10:30:19
原創
825 人瀏覽過

對於想要停用網頁中某些圖片右鍵選單的使用者,可以透過 JQuery 的一些程式碼來實現。這篇文章將會介紹一些方法來幫助你使用 JQuery 禁止圖片右鍵選單。

首先,我們需要匯入 JQuery 函式庫。在 HTML head 標籤中,新增以下程式碼:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
登入後複製

接下來,我們需要找到需要禁止右鍵選單的圖片的 ID 或 Class,假設我們要停用圖片的 ID 為 myImage。在JQuery 中,禁止右鍵選單的程式碼可能會像這樣:

$("#myImage").on("contextmenu", function() {
return false;
});
登入後複製

對應地,如果需要停用的是一組圖片的Class,程式碼可能會像這樣:

$(".myImage").on("contextmenu", function() {
return false;
});
登入後複製

第一在行程式碼中,我們使用了JQuery 的選擇器來選取了擁有特定ID 或Class 的圖片。緊隨其後的,是應用 JQuery 中 "contextmenu" 事件,並把它賦予了選中的圖片。在這個例子裡,我們使用了 return false 告訴瀏覽器取消本來應該出現的右鍵選單。注意到事件名字 "contextmenu" 的寫法是小寫,跟其他事件名字的寫法是不同的。

最後,在整個 JQuery 程式碼區塊之外,我們需要將程式碼放在一個 ready 函數裡面,以確保程式碼執在文件載入完成後執行。程式碼可以這樣寫:

$(document).ready(function() {
  $("#myImage").on("contextmenu", function() {
    return false;
  });
});
登入後複製

在這裡,我們使用了一個匿名 function,作為 jQuery 的 ready() 函數所需的參數,它將在文件中所有的元素都被載入以後執行。

總結一下,JQuery 禁止圖片右鍵選單的程式碼可以如下:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(&quot;#myImage&quot;).on(&quot;contextmenu&quot;, function() {
    return false;
  });
});
</script>
登入後複製

在你的HTML 程式碼中,將myImage 替換為你希望停用右鍵選單的圖片的ID 或Class 即可。透過使用 JQuery,你現在學會了停用特定圖片的右鍵選單,希望這篇文章對你有幫助!

以上是聊聊利用jquery禁止圖片右鍵選單的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板