JS簡單實現自定義右鍵選單

今天來講乙個關於右鍵選單的小demo，拋磚引玉。

首先，我們要用css和html做乙個自定義右鍵選單。

功能1功能2

功能3功能4

功能5

/*css***/

#menu

.menu

現在我們已經有了自定義選單，還需要乙個很重要的事件 contextmenu。

> contextmenu :當你在頁面上右鍵點選時，會觸發此事件，並會跳出瀏覽器自帶的右鍵選單。

所以，我們要做的就是，在觸發contextmenu事件時，取消掉預設行為(也就是阻止瀏覽器顯示自帶的選單)

通過傳入的事件物件，來確定滑鼠的點選位置，作為left和top的值來進行元素的定位，並顯示自定義選單

window.oncontextmenu=function(e)
//關閉右鍵選單，很簡單
window.onclick=function(e)

這裡只是乙個很簡單的例子，contextmenu事件支援所有 html 元素，這意味者你可以給不同的元素，自定義不同的右鍵選單，由於contextmenu事件會冒泡傳播，子節點上觸發的事件，在父節點上也會觸發，所以應該呼叫對應的函式或者設定對應的屬性值來阻止事件冒泡。

根據事件物件來定位其實很複雜也很簡單，除了clienty和clientx，滑鼠事件物件提供了一系列複雜的相關資訊，諸如layerx,pagex等等，這些值並不直觀，還存在瀏覽器相容問題，不過clientx和clienty，可以說是萬金油屬性。