當我們在瀏覽器中點擊鼠標右鍵時會彈出一個默認的窗口,我們可以通過改變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>