欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)右鍵菜單功能

 更新時間：2016年11月28日 08:34:59   作者：簡單成書  
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)右鍵菜單功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文解決的問題：1、實現(xiàn)右鍵菜單功能代碼；2、阻止默認(rèn)事件的實際應(yīng)用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>右鍵菜單</title>
 <style type="text/css">
  #menu {
   position: fixed;
   left:0;
   top:0;
   width:200px;
   height: 400px;
   background-color: blue;
   display: none;
  }
 </style>
</head>
<body>
 <div id="menu">

 </div>
 <script type="text/javascript">
 var menu = document.getElementById("menu");
 document.oncontextmenu = function(e) {
  var e = e || window.event;
  //鼠標(biāo)點的坐標(biāo)
  var oX = e.clientX;
  var oY = e.clientY;
  //菜單出現(xiàn)后的位置
  menu.style.display = "block";
  menu.style.left = oX + "px";
  menu.style.top = oY + "px";
  //阻止瀏覽器默認(rèn)事件
  return false;//一般點擊右鍵會出現(xiàn)瀏覽器默認(rèn)的右鍵菜單，寫了這句代碼就可以阻止該默認(rèn)事件。
 }
 document.onclick = function(e) {
   var e = e || window.event;
   menu.style.display = "none"
  }
 menu.onclick = function(e) {
  var e = e || window.event;
  e.cancelBubble = true;
 }
 // document.addEventListener("contextmenu",function(e){
 // var e = e || window.event;
 // e.preventDefault();
 // alert("menu");
 // },false)
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論