oncontextmune事件
當用戶在某元素上點擊鼠標右鍵時觸發此事件。
如何獲取鼠標位置
當用戶點擊某元素，并觸發某個鼠標事件時，可以根據該事件對象的信息獲取鼠標的位置。鼠標在該元素內容區域的坐標
- 橫向：clientX
- 縱向：clientY
eg：
someEle.addEventLisntener('click',function(event){
let mouseIndexX = event.clientX; //鼠標橫向位置
let mouseIndexY = event.clientY; //鼠標縱向位置
});
如何實現頁面屏蔽右鍵菜單
在講實現方法前，先了解一下事件的捕獲和冒泡
1.事件冒泡
事件冒泡，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接受，然后逐級向上傳播到較為不具體的節點（文檔）
eg：比如有當前這個DOM結構
document
html
body
div
如果你點擊了<div>元素，那這個click事件會按照下面的順序傳播：
div > body > html > document
也就是說，click事件首先在<div>元素上發生，然后，click事件沿Dom樹向上傳播，在每一級節點上都會發生，直至傳到document對象（即不單單<div>元素綁定的click事件會被觸發，如果<body>元素也綁定了click事件，那也會被觸發。利用此特性，可以實現事件委托（事件代理））
2.事件捕獲
事件捕獲的思想跟事件冒泡相反。即不太具體的節點更早接收到事件，而最具體的節點應該最后接受事件。
如果以前面的dom結構為例，則事件傳播的走向如下
document > html > body > div
3.addEventListener（）函數
一般瀏覽器都是使用事件冒泡（默認）
當然我們也可以更改事件的傳播順序，不過要使用addEventListener這個方法為元素添加事件。
addEventListener函數有三個參數
參1：事件名稱，參2：事件函數
參3：true || false
true：表示在捕獲階段調用事件處理程序
false：表示在冒泡階段調用事件處理程序
使用addEventListener函數的好處是可以為元素添加多個事件處理程序（可同名），觸發事件時，按添加的順序執行
4.阻止事件
-
preventDefault
阻止DOM元素的默認行為，例如阻止表單type="submit"的button或input的提交表單行為。 -
stopPropagation
阻止事件的繼續傳播（冒泡） -
stopImmediatePropagation
阻止其他事件處理函數執行，并也會阻止事件的傳播。
stopPropagation和stopImmediatePropagation的區別：
前者阻止事件繼續向上傳播，但不阻止同類型事件的執行，比如
someEle.addEventListener('click',function(event){
console.log('hello world');
event.stopProgagation();
});
someEle.addEventListener('click',function(){
console.log('你好');
}
// hello world
// 你好
在 click 事件綁定的第一個函數中，調用了stopPropagation(),這樣會阻止事件繼續向上冒泡，即該元素的父級和祖先元素的click不會被執行，但是該元素的click事件綁定的第二個函數，則會執行。
如果使用
event.stopImmediatePropagation();
// hello world
那除了事件不會向上冒泡之外，在調用了這個方法的函數中的后面綁定的函數也不會執行
解決方法
繞了一圈回來，現在終于可以來了解一下解決方法了。
其實如果看了上面的內容，相信大家都應該知道怎么解決了
沒錯，其實就一行代碼
event.preventDefault()
只要阻止dom元素的默認行為即可。右鍵單擊網頁一般會有默認的菜單欄彈出，只要阻止了它的默認行為就解決了這個問題。
其他知識(css屬性)
1.visibility
visibility：visible || hidden || collapse || inherit
visible（默認值：可見的）inherit（繼承父級visibility屬性）
hidden（隱藏）：使用該屬性的元素在頁面中不可見，但是還占據相應的文檔布局
collapse（？？）用于隱藏表格，可刪除一行或者一列，刪除后影響表格布局。當不用于表格時，作用等同于hidden？
visibility對比display
兩者都有隱藏元素的作用，不同的是，前者元素隱藏后，還占據著原來的文檔位置。后者隱藏后，該元素直接從文檔中消失。
JS與visibility
在元素應用了visibility：hidden屬性隱藏后，該元素就不接受js效果了。
這個不接受JS效果指的是：js為該元素添加的事件，比如click、mousemove等事件不起作用。就你點擊那個相應的位置或者其他操作，原本設定的效果都不會出來。但是還是能通過JS將這個元素進行位移、變色等其他操作的，即使hidden了！
還有其他該知識點請看
深入理解CSS元素visibility
2.元素的寬高：
- offsetWidth和offsetHeight
eg : offsetWidth = width + padding + border
style.width也是當前對象的寬度(width+padding+border)。
區別：
1)style.width返回值除了數字外還帶有單位px；
2)如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小， style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值；
3)如果沒有給 HTML 元素指定過 width樣式，則 style.width 返回的是空字符串； - scrollWidth 和 scrollHeight
獲取對象的滾動寬/高度 - clientWidth 和 clientHeight
獲取對象內容的寬高，包括padding，不包括border的寬高
3.鼠標指針位置：
screenX/Y: 參照點也就是原點是整個屏幕的左上角，不限于瀏覽器內。
clientX/Y: 參照點是瀏覽器內容區域的左上角（瀏覽器顯示區域的左上角），該參照點會隨之滾動條的移動而移動。
pageX/Y：參照點也是瀏覽器內容區域的左上角（整個頁面的左上角），但它不會隨著滾動條而變動
