oncontextmenu的用法示例。js右击菜单示例

最新推荐文章于 2024-04-28 10:55:39 发布

林强181

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量305

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/qlin_11/article/details/128083269

版权

https://www.runoob.com/jsref/event-oncontextmenu.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .menu {
        width: 100px;
        height: 200px;
        background-color: antiquewhite;
        position: absolute;
        display: none;
      }
    </style>
  </head>
  <body>
	   <div id="mo" style="height:500px;width:500px;background:red;"></div>
    <!-- 鼠标右键菜单 -->
    <div class="menu">
      <p id="meli">菜单1</p>
      <p>菜单2</p>
      <p>菜单3</p>
    </div>
    <script>
      const menu = document.querySelector(".menu");
		
		var meli = document.getElementById("meli")
		meli.onclick = function(){
			 meli.style.display = 'none'
		}
		
		
var mo = document.getElementById("mo")
      //右键按下，菜单出现在右键位置
      mo.oncontextmenu = function (event) {
        //阻止浏览器默认事件
        event.preventDefault();

        //获取右键基于浏览器可视屏幕坐标
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        console.log(mouseX, mouseY);
        
        //改变菜单位置
        menu.style.top=mouseY+'px';
        menu.style.left=mouseX+'px';
        
        menu.style.display='block';
      };

      //左键按下，菜单消失
      mo.onmousedown=function(){
        menu.style.display='none';
      }
    </script>
  </body>
</html>