實例

當用戶在 div 元素 上右擊鼠標時執行 JavaScript ：

 div oncontextmenu= myFunction() contextmenu= mymenu 

定義和使用

oncontextmenu 事件在元素中用戶右擊鼠標時觸發并打開上下文菜單。

注意：所有瀏覽器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 瀏覽器支持。

瀏覽器支持

語法

HTML 中:

 element oncontextmenu= myScript 

JavaScript 中:

object.oncontextmenu=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener( contextmenu , myScript);

注意： Internet Explorer 8 及更早 IE 瀏覽器版本不支持 addEventListener() 。

技術細節

當我們在瀏覽器中點擊鼠標右鍵時會彈出一個默認的窗口，我們可以通過改變oncontexmenu事件來修改它的默認事件；另外，當我們按空格鍵時，瀏覽器窗口的滾動條會向下滾動一段距離，我們也可以通過綁定相應的事件來改變它。如下：

 !doctype html  html  head  !--聲明當前頁面編碼集(中文編碼 gbk,gb2312 ,國際編碼 utf-8 )--  meta http-equiv= Content-Type content= text/html; charset=utf-8  meta name= keywords content= 關鍵詞,關鍵詞  meta name= description content=  title html /title  style type= text/css  *{padding:0px;margin:0px;} body{height:2000px;} /style  /head  body  script /*屏蔽鼠標右鍵的默認事件*/ document.oncontextmenu = function(){ return false;/*屏蔽按空格鍵是滾動條向下滾動*/  document.onkeydown = function(ev){ var e = ev||event; if(e.keyCode == 32){ return false; /script  /body  /html 

下面是一個改變鼠標右鍵的默認事件案例：

 !doctype html  html  head  !--聲明當前頁面編碼集(中文編碼 gbk,gb2312 ,國際編碼 utf-8 )--  meta http-equiv= Content-Type content= text/html; charset=utf-8  meta name= keywords content= 關鍵詞,關鍵詞  meta name= description content=  title html /title  style type= text/css  *{padding:0px;margin:0px;} #box{display:none;width:150px;height:200px;background:gray;position:fixed;} /style  /head  body  div id= box /div  script  var obox = document.getElementById( box  /*點擊鼠標右鍵時執行*/ document.oncontextmenu = function(ev){ var e = ev||window.event; var x = e.clientX; var y = e.clientY; obox.style.cssText = display:block;top: +y+ px;left: +x+ px;  return false; /*點擊空白處隱藏*/ document.onclick = function(){ obox.style.display = none  /script  /body  /html 

以上就是html中當上下文菜單被觸發時運行腳本的oncontextmenu事件的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。