实现点击鼠标右键获取菜单栏

最新推荐文章于 2022-05-17 19:59:07 发布

TNT，cnd

最新推荐文章于 2022-05-17 19:59:07 发布

阅读量876

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_41979469/article/details/86534243

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开发工具与关键技术：Visual Studio2015 javascript

作者：华境聪
撰写时间：2019/1/18

为了能在浏览器上，实现点击鼠标右键，获取菜单栏目，所做出的效果。
首先，利用浏览器自动加载触发 “window.onload”方法，获取“p”标签的ID，给“p”标签的鼠标右键事件，触发弹窗的显示以及关闭浏览器右键菜单。


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <style>
        li{
            list-style-type:none;
            padding-top:10px;
        }
    </style>
    <script type="text/javascript"> 

        window.onload = function () { //页面加载完成后触发
            var table = document.getElementById('table1');
            table.oncontextmenu = function () {//oncontextmenu：限于鼠标右键
                document.getElementById('xianshi').style.display = 'block';
                return false;//禁用浏览器右键菜单
            }
        }
        function quxiao() {
            document.getElementById('xianshi').style.display = 'none';
        }
    </script>
</head>
<body >
    <p  id="table1">点击鼠标右键可以获得菜单。</p>
  <div style="background-color:#f6e3e3;display:none;width:100px;position:relative;left:74px;top:-14px;" id="xianshi">
    <ul >
    <li>显示1</li>
    <li>显示2</li>
    <li>显示3</li>
    <li>显示4</li>
    <li>显示5</li>
      </ul>
      <button style="margin-left: 54px;" onclick="quxiao()">取消</button>
  </div>
        
    
</body>
</html>

以及输出的截图：
在这里插入图片描述

在此，需要注意的是：window.onload的方法一定要配和return false使用，以及oncontextmenu鼠标右键方法使用。

TNT，cnd

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现点击鼠标右键获取菜单栏

开发工具与关键技术：Visual Studio2015 javascript作者：华境聪撰写时间：2019/1/18为了能在浏览器上，实现点击鼠标右键，获取菜单栏目，所做出的效果。首先，利用浏览器自动加载触发 “window.onload”方法，获取“p”标签的ID，给“p”标签的鼠标右键事件，触发弹窗的显示以及关闭浏览器右键菜单。@{ Layout = null;}&...
复制链接

扫一扫