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

主要运用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. flask打包安装文件

    如果在一台新的电脑需要运行项目的时候,这时候就需要将项目项目所用到的模块都导出来 依赖文件生成pip freeze > requirements.txt 执行该命令会在项目根目录下生成一个 re ...

  2. python高并发的详解

    一.什么是高并发 高并发(High Concurrency)是互联网分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计保证系统能够同时并行处理很多请求. 高并发相关常用的一些指标有响应时间( ...

  3. Python_算术运算符

    1.算术运算符 示例: >>> num1=7 >>> num2=3 >>> num1+num2 #+ 10 >>> num1-n ...

  4. Tkinter关于新建窗口内Entry无法获取值（值全为空）的解决办法

    最近在做Python的课程作业,遇到一个问题,描述如下: 使用Python内置的Tkinter模块进行GUI编程 给一个按钮(或菜单)绑定事件,打开一个新窗口,新窗口内有Entry若干,通过textv ...

  5. Nginx- web服务配置与测试

    (一) 软件介绍由俄罗斯人lgor Sysove开发,为开源软件.支持高并发:支持几万并发连接(特别是静态小文件业务环境) 资源消耗少:在3万并发连接下开启10个Nginx线程消耗内存不到200M 支 ...

  6. SpringCloud2.0 概述 基础教程(一)

    1.SpringCloud简介 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,领导选举 ...

  7. k8s的pod的资源调度

    1.常用的预选策略 2.优选函数 3.节点亲和调度 3.1.节点硬亲和性 3.2.节点软亲和性 4.Pod资源亲和调度 4.1.Pod硬亲和度 4.2.Pod软亲和度 4.3.Pod反亲和度 5.污点 ...

  8. JDK源码那些事儿之PriorityBlockingQueue

    今天继续说一说阻塞队列的实现,今天的主角就是优先级阻塞队列PriorityBlockingQueue,从命名上看觉得应该是有序的,毕竟是优先级队列,那么实际上是什么情况,我们一起看下其内部实现,提前说 ...

  9. Java 中抽象类与接口的区别

    TypeScript 中的接口,有点类似抽象类的概念.Java 中抽象类属于包含属性与抽象行为,而接口通常只是抽象行为.抽象类可以实现模板模式. 参考 https://www.cnblogs.com/ ...

  10. Gitlab，Mac下生成SSH Key222

         git是分布式的代码管理工具,远程的代码管理是基于ssh的,所以要使用远程的git则需要ssh的配置.简单的说,Git - 版本控制工具:Github是一个网站,提供给用户空间创建git仓储 ...