首頁  >  文章  >  web前端  >  自訂右鍵選單使用JS實作的簡單實例分享

自訂右鍵選單使用JS實作的簡單實例分享

黄舟
黄舟原創
2017-05-31 10:09:331617瀏覽

本篇文章主要介紹了JS簡單實作自訂右鍵選單實例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

RT,一個簡單的例子,僅僅講述原理

程式碼如下:

<p id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>

假設我要把上面這個p設定為右鍵選單,先隨意美化一下。

原理就是利用contextmenu事件,當右鍵點擊時,會觸發這個事件時,該事件物件可以獲得滑鼠距離頁面左上角的距離clientX和clientY,

我們可以利用這兩個屬性,來控制p的水平,垂直偏移量,並且傳回false,取消事件的預設行為,來模擬瀏覽器的右鍵選單。

document.oncontextmenu=function(e){

  var x=e.clientX+&#39;px&#39;;

  var y=e.clientY+&#39;px&#39;;

  var node=document.querySelector(&#39;#menu&#39;);

  node.style.left=x;

  node.style.top=y;

  node.style.width=100+&#39;px&#39;;

  node.style.height=100+&#39;px&#39;;

  return false; //很重要,不能让浏览器显示自己的右键菜单

}

現在是關閉部分,關閉右鍵選單的方式,通常是在空白區域點擊左鍵。

document.onclick=function(e){

  if(e.target.id!=&#39;menu&#39;)

  {

    var node=document.querySelector(&#39;#menu&#39;);

    node.style.width=0;

    node.style.height=0;

  }
}

這只是一個基本的思路的,核心就是contextmenu事件。你可以在此基礎上使用CSS隨意美化升級,加入類似transition等屬性,來實現動畫效果。

以上是自訂右鍵選單使用JS實作的簡單實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn