自定義網頁右鍵菜單總結


任務目的

  1. 了解js中的oncontextmenu事件
  2. 了解如何獲取鼠標位置
  3. 了解如何實現頁面屏蔽右鍵菜單

任務描述

  1. 實現鼠標右擊時,出現自定義菜單。點擊非自定義菜單區域時,隱藏自定義菜單。參考樣例(點擊查看),實現頁面開發,要求實現效果基本一致。
  2. 點擊自定義菜單條目時,彈出菜單條目名稱。

任務注意事項

  1. 自定義菜單出現在鼠標指針右下方,當右邊區域不夠大,展示在左下方,同理,當下方區域不夠時,展示在鼠標指針上方
  2. 注意測試不同情況,尤其是極端情況下的效果
  3. 盡量不要使用第三方庫,包括jQuery

參考資料

  1. oncontextmenu: 了解JavaScript中oncontextmenu的基本知識
  2. event那些事 收集整理的事件相關資料

自定義網頁右鍵菜單總結

1、 oncontextmenu Event

當用戶右鍵點擊一個元素時,觸發oncontextmenu事件,打開上下文菜單。

注意:雖然所有瀏覽器均支持oncontextmenu事件,但是目前只有火狐瀏覽器支持contextmenu屬性。

語法:

在HTML中:

<element oncontextmenu="myScript">

在JavaScript中

object.oncontextmenu = function(){myScript};

在JavaScript中,使用addEventListener()方法:

object.addEventListener("contextmenu", myScript);

2、 CSS3 :not Selector

:not(selector)選擇器除了指定的元素或選擇器外,其他元素均使用此樣式。

CSS語法:

:not(selector) {
    css declarations;
}

3、 MouseEvent clientX Property

當鼠標事件變化時,clientX屬性返回鼠標相對當前窗口的水平坐標,如果要獲取鼠標相對於當前窗口的垂直坐標,使用clientY屬性。

注意:這是一個只讀屬性。

語法:

event.clientX

eg:var x = event.clientX;

4、 如何讓原有的右鍵菜單不可用

<body oncontextmenu="return false;">

事件處理方法中 的 return false可阻止事件宿主的默認行為;

5、 HTML DOM clientWidth Property

clientWidth屬性返回一個元素的可視像素寬度,包括padding,但不包括border,scrollbar和margin。當元素內容比元素實際寬度要寬時,這個屬性只返回可視寬度。這個屬性經常和clientHeight屬性同時使用。

注意:使用offsetHeight和offsetWidth屬性,返回一個元素的可視高度和寬度,包括padding,border和scrollbar。

語法:

element.clientWidth

返回值:一個數字,代表一個元素以像素為單位的可視寬度,包括padding。

6、 HTML DOM offsetHeight Property

offsetHeight屬性返回一個元素以像素為單位的可視高度,包括padding,border,scrollbar但不包括margin。如果元素內容比元素實際高度要高,此屬性只返回可視高度。這個屬性常和offsetWidth屬性同時使用。

語法:

element.offsetHeight

返回值:一個數字,代表一個元素以像素為單位的可視高度,包括padding,border和scrollbar。

7、 JavaScript Window Screen

window.screen對象包含用戶屏幕的信息。window.screen對象可以不寫window前綴。

屬性:

screen.width:返回以像素為單位的屏幕寬度值。

screen.height:返回以像素為單位的屏幕高度值。

screen.availWidth:返回以像素為單位的屏幕可用寬度,比如,不包括任務欄。

screen.availHeight:返回以像素為單位的屏幕可用高度,比如,不包括任務欄。

screen.colorDepth:返回一個顏色所用的bit數。目前,現在計算機為24bit或32bit。

screen.pixelDepth:返回屏幕的像素深度屬性。

8、 已提交作業

代碼地址https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-3

預覽地址http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-3/index.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM