实现点击鼠标右键时出来菜单代码如下：

主要运用oncontextmenu事件，oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标右键功能</title>

    <link rel="stylesheet" href="1.css">

    <!-- <script type="text/javascript" src="1.js"></script> -->

</head>

<body>

<ul id="menu">

    <li>删除</li>

    <li>变成红色</li>

    <li>变成绿色</li>

    <li>恢复原色</li>

    <li>移到最后</li>

    <li>移到最前</li>

    <li><a href="http://news.baidu.com/" target="_blank" style="text-decoration: none;">搜索新闻</a></li>

</ul>

<ul id="ul1">

    <li title="请点击鼠标右键">习主席定调2018中国经济，要干这些大事</li>

    <li title="请点击鼠标右键">国台办：坚决惩治电信诈骗犯罪 切实维护两岸同胞利益</li>

    <li title="请点击鼠标右键">北大将每年增加５００万元经费支持马克思主义学院建设</li>

    <li title="请点击鼠标右键">韩媒：韩军方已经计划向美增购20架F-35A隐形战斗机</li>

    <li title="请点击鼠标右键">大学教师论文抄袭被撤稿 当事人：文学都是相似的</li>

    <li title="请点击鼠标右键"> 冒雨退礼书记落马　同学曾劝：没50万存款做什么官</li>

    <li title="请点击鼠标右键">男子寄万元茶叶外包装破损快递公司：赔6倍运费</li>

</ul>

    <script>

    window.onload=function (){

    var content=document.getElementById('ul1').children;

    var menu=document.getElementById('menu');

    var menuli=menu.children;

    for (var i=0; i<content.length; i++)

    {

        content[i].oncontextmenu=function (ev){

            var event=ev||window.event;

            menu.style.display='block';

            menu.style.left=event.clientX+'px';

            menu.style.top=event.clientY+'px';

            var _this=this;

            menuli[0].onclick=function (){

                _this.parentNode.removeChild(_this);

            };

            menuli[1].onclick=function(){

                _this.style.background="red";

            };

            menuli[2].onclick=function(){

                _this.style.background="green";

            };

            menuli[3].onclick=function(){

                _this.style.background="#ccc";

            };

            menuli[4].onclick=function(){

                // var clone=_this.cloneNode(true);

                var parent=_this.parentNode;

                parent.removeChild(_this);

                parent.appendChild(_this);

            };

            menuli[5].onclick=function(){

                // var clone=_this.cloneNode(true);

                var parent=_this.parentNode;

                parent.removeChild(_this);

                parent.insertBefore(_this,parent.firstChild);

            };

            return false;  //阻止默认操作点击右键时不出现本身鼠标右键的菜单

        };

    }

    document.onclick=function (){

        menu.style.display='none';

    };

};

    </script>

</body>

</html>

css代码如下：

* {

    margin:;

    padding:;

    list-style:none;

}

#ul1 li {

    width:480px;

    background:#ccc;

    border:1px solid black;

    margin:10px;

    float:left;

    line-height:30px;

    text-indent:20px;

    cursor: pointer;

}

#menu {

    width:120px;

    border:1px solid black;

    position:absolute;

    left:;

    top:;

    display:none;

    background:white;

    cursor: pointer;

    text-indent: 20px;

}

#menu li {

    padding:3px;

}

#menu li:hover {

    background:#ccc;

}

#menu a{

    color: black;

}

js的鼠标右键简单菜单的更多相关文章

  1. js实现鼠标右键自定义菜单(弹出层)，并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)

    <table class="oa-el-panel-tree"> <tr> <td style="vertical-align: top; ...

  2. 添加找回鼠标右键新建菜单里的新建office2003/2007/2010文档的简洁方法

    鼠标右键新建菜单里的新建office文档丢失了怎么办?我们可以通过一些优化设置软件如优化大师来定制,但更简单的方法是只需要导入相应的注册表设置就行了. 下面即在鼠标右键新建菜单里添加新建office2 ...

  3. js自定义鼠标右键菜单

    document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...

  4. HTML，JS禁止鼠标右键、禁止全选、复制、粘贴的方法

    禁止鼠标右键.禁止全选.复制.粘贴: oncontextmenu事件禁用右键菜单: js代码: document.oncontextmenu = function(){ event.returnVal ...

  5. Win10 鼠标右键新建菜单添加自定义文件

    1. 引言 在鼠标右键(右单机)新建菜单中添加自定义文件,例如:写字板,markdown等. 效果图: 2. 操作步骤(以Win10为例) 1. win+R输入regedit进入注册表 2. 这里以添 ...

  6. JS 禁用鼠标右键

    oncontextmenu="window.event.returnValue=false" style="overflow-y: hidden; overflow-x: ...

  7. JS屏蔽鼠标右键

    //方法1: function stop() {    return false;}document.oncontextmenu = stop;//方法2: window.document.oncon ...

  8. JS禁止鼠标右键、禁止全选、复制、粘贴的方法（所谓的防盗功能）

    简述:一个防君子不防小人的鸡肋的功能,针对小白还行. 代码如下: <script> //都能支持 document.oncontextmenu = function (e) { retur ...

  9. html js 捕捉鼠标右键事件，按下滚轮事件，左键点击事件

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. oracle的LAST_DAY（）函数

    转自:https://blog.csdn.net/u012581453/article/details/53727936 LAST_DAY LAST_DAY函数返回指定日期对应月份的最后一天. 获取当 ...

  2. Linux 非互联网环境安装依赖包

    1 介绍 有的生产环境是没有网络的,我们部署rpm包的时候会出现缺少很多rpm包的依赖问题,都去网上下载实在太麻烦,今天介绍一个办法可以解决这一问题. 2 解决方案 找一台可以联网的机器,在上边下载相 ...

  3. 安装xshell、xftp

    1.Xshell的软件的下载.安装 xshell是一个终端模拟软件,而且是远程近程都可以. 就是模拟服务器所在的linux,在xshell中可以输入命令, 就像在服务器的linux中输入命令一样.一般 ...

  4. javascript_10-函数

    函数 //定义函数 0-100 相加 function getSum() { var sum = 0; for (let i = 1; i <= 100; i++) { sum += i; } ...

  5. SQL SERVER-修改服务器名称

    --query servername SELECT @@SERVERNAME --alter servername sp_dropserver 'oldname' go sp_addserver 'n ...

  6. 快捷键和功能键、进入DOS命令行的方法、DOS命令讲解、java跨平台原理、JRE和JDK的定义、书写格式

    快捷键和功能键A:键盘功能键* a:Tab* b:Shift* c:Ctrl* d:Alt* e:空格 * f:Enter* g:Window* h:上下左右键* i:PrtSc(PrintScree ...

  7. 49、[源码]-Spring容器创建-创建Bean准备

    49.[源码]-Spring容器创建-创建Bean准备

  8. [Dart] Dynamic variable in Dart

    First way to create dynamic variable is using 'dymaic' keywrod: dynamic a = 123; a = '123'; Second w ...

  9. element ui table的所有属性

    1. table 的props: data: { type: Array, default: function() { return []; } }, size: String, width: [St ...

  10. sublime 分屏显示 不是插件

    点击 view--layout --- 选择几屏即可(single / columns 2 ....) 快捷键  Alt + Shift + 1/2/3/4  分别对应1 ,2,3,4屏 如何把一个文 ...