自定义网页右键菜单总结
任務(wù)目的
了解js中的oncontextmenu事件
了解如何獲取鼠標位置
了解如何實現(xiàn)頁面屏蔽右鍵菜單
任務(wù)描述
實現(xiàn)鼠標右擊時，出現(xiàn)自定義菜單。點擊非自定義菜單區(qū)域時，隱藏自定義菜單。參考樣例（點擊查看），實現(xiàn)頁面開發(fā)，要求實現(xiàn)效果基本一致。
點擊自定義菜單條目時，彈出菜單條目名稱。
任務(wù)注意事項
自定義菜單出現(xiàn)在鼠標指針右下方，當右邊區(qū)域不夠大，展示在左下方，同理，當下方區(qū)域不夠時，展示在鼠標指針上方
注意測試不同情況，尤其是極端情況下的效果
盡量不要使用第三方庫，包括jQuery
參考資料
oncontextmenu: 了解JavaScript中oncontextmenu的基本知識
event那些事收集整理的事件相關(guān)資料
自定義網(wǎng)頁右鍵菜單總結(jié)
1、 oncontextmenuEvent
當用戶右鍵點擊一個元素時，觸發(fā)oncontextmenu事件，打開上下文菜單。
注意：雖然所有瀏覽器均支持oncontextmenu事件，但是目前只有火狐瀏覽器支持contextmenu屬性。
語法：
在HTML中：
<elementoncontextmenu="myScript">
在JavaScript中
object.oncontextmenu=function(){myScript};
在JavaScript中，使用addEventListener()方法：
object.addEventListener("contextmenu",myScript);
2、 CSS3:notSelector
：not(selector)選擇器除了指定的元素或選擇器外，其他元素均使用此樣式。
CSS語法：
:not(selector) {
css declarations;
}
3、 MouseEventclientXProperty
當鼠標事件變化時，clientX屬性返回鼠標相對當前窗口的水平坐標，如果要獲取鼠標相對于當前窗口的垂直坐標，使用clientY屬性。
注意：這是一個只讀屬性。
語法：
event.clientX
eg：varx = event.clientX;
4、 如何讓原有的右鍵菜單不可用
<body oncontextmenu="return false;">
事件處理方法中 的 return false可阻止事件宿主的默認行為；
5、 HTML DOMclientWidthProperty
clientWidth屬性返回一個元素的可視像素寬度，包括padding，但不包括border，scrollbar和margin。當元素內(nèi)容比元素實際寬度要寬時，這個屬性只返回可視寬度。這個屬性經(jīng)常和clientHeight屬性同時使用。
注意：使用offsetHeight和offsetWidth屬性，返回一個元素的可視高度和寬度，包括padding，border和scrollbar。
語法：
element.clientWidth
返回值：一個數(shù)字，代表一個元素以像素為單位的可視寬度，包括padding。
6、 HTML DOMoffsetHeightProperty
offsetHeight屬性返回一個元素以像素為單位的可視高度，包括padding，border，scrollbar但不包括margin。如果元素內(nèi)容比元素實際高度要高，此屬性只返回可視高度。這個屬性常和offsetWidth屬性同時使用。
語法：
element.offsetHeight
返回值：一個數(shù)字，代表一個元素以像素為單位的可視高度，包括padding，border和scrollbar。
7、 JavaScriptWindow Screen
window.screen對象包含用戶屏幕的信息。window.screen對象可以不寫window前綴。
屬性：
screen.返回以像素為單位的屏幕寬度值。
screen.height:返回以像素為單位的屏幕高度值。
screen.availWidth:返回以像素為單位的屏幕可用寬度，比如，不包括任務(wù)欄。
screen.availHeight:返回以像素為單位的屏幕可用高度，比如，不包括任務(wù)欄。
screen.colorDepth:返回一個顏色所用的bit數(shù)。目前，現(xiàn)在計算機為24bit或32bit。
screen.pixelDepth:返回屏幕的像素深度屬性。
8、 已提交作業(yè)
代碼地址https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-3
預(yù)覽地址http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-3/index.html
總結(jié)
以上是生活随笔為你收集整理的自定义网页右键菜单总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AngularJs的UI组件ui-Boo
- 下一篇： 铁皮石斛价格！（铁皮石斛多少钱一斤）