鼠标右键事件 contextmenu

最新推荐文章于 2024-08-20 10:07:45 发布

binlety

最新推荐文章于 2024-08-20 10:07:45 发布

阅读量2.2k

点赞数

分类专栏： js基础文章标签：右键事件contextmenu

本文链接：https://blog.csdn.net/binlety/article/details/81460304

版权

js基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
               list-style: none;
           }
           #box{
               width: 300px;
               border: 1px solid red;
               display: none;
               position: absolute;
           }
           #box li{
               height: 30px;
               line-height: 30px;
               text-indent: 15px;
               cursor: help;
           }

           #box li:hover{
               background-color: #FF7B0E;
           }
       </style>
   </head>
   <body>
       <ul id="box">
           <li>重新加载</li>
           <li>变红</li>
           <li>变黄</li>
           <li>删除</li>
           <li>复制</li>
           <li style="color: greenyellow;">粘贴</li>
       </ul>

       <input type="text" />
       <div style="height: 100px;width: 100px;background-color: gainsboro;"></div>



   </body>
   <script type="text/javascript">

       var oBox = document.getElementById("box");
       var target = null;
       var node_Clone = null;
       //鼠标右键事件 oncontextmenu
       document.οncοntextmenu=function (ev) {
           var ev = ev||event;
           target = ev.target || ev.srcElement;
           oBox.style.display = "block"
           oBox.style.left=ev.clientX+"px";
           oBox.style.top = ev.clientY+"px";
           return false;
       }

       var aLi = oBox.querySelectorAll("li");
       //重新加载
       aLi[0].onclick = function () {
           window.location.reload();
       }

       //变红
       aLi[1].onclick = function () {
           target.style.backgroundColor = "red";
           oBox.style.display = "none"
       }
       //变黄
       aLi[2].onclick = function () {
           target.style.backgroundColor = "yellow";
           oBox.style.display = "none"
       }

       //删除
       aLi[3].onclick = function () {
           target.parentNode.removeChild(target)
           oBox.style.display = "none"
       }
       //复制

       aLi[4].onclick = function () {
           node_Clone = target.cloneNode(true);
           oBox.style.display = "none";
           aLi[aLi.length-1].style.color="black";
       }

       //粘贴

       aLi[5].onclick = function () {
           document.body.appendChild(node_Clone.cloneNode(true));
           oBox.style.display = "none";
       }


   </script>
</html>