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

主要运用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. sql server行转列

    创建测试数据 学生表 Student create table Student(S# varchar(10),Sname nvarchar(10),Sage datetime,Ssex nvarcha ...

  2. win10 下的YOLO v3 的编译与使用

    部署环境:win10 +CUDA 10.0 + vs2017 + opencv 3.4.0  代码版本是 https://github.com/AlexeyAB/darknet 1.初始准备 (1)下 ...

  3. select加锁分析(Mysql)

    [原创]惊!史上最全的select加锁分析(Mysql) 前言 大家在面试中有没遇到面试官问你下面六句Sql的区别呢 select * from table where id = ? select * ...

  4. 如何使用.gitignore文件删除掉已经提交的文件

      如何使用.gitignore文件删除掉已经提交的文件 2018.06.06 22:13:38字数 96阅读 116 如果你的文件已经提交,而此时你才发现忘了添加.gitignore文件,不用担心, ...

  5. JMeter测试HBase

    在网上找了关于jmeter连接hbase的方式,主要分为两种:通过导入jar包连接(Java Request)和通过BeanShell远程连接,由于刚接触jmeter没多久,对BeanShell还不熟 ...

  6. [#Linux] CentOS 7 配置JDK后，eclipse无法启动，提示jdk路径错误。

    ​​​​ 解决方案:在eclipse的目录下创建一个jre文件夹,在jre文件夹里创建一个jdk的bin目录的链接 1.进入到eclipse目录下,右键在终端打开. 2.创建jre目录:mkdir j ...

  7. javascript_04-类型转换

    类型转换 掌握三种类型的转换 转换成字符串类型 转换成数值类型 转换成布尔类型 转换成字符串 1.几乎每一个值都有 toString() 方法,除了 null 和 undefined. var age ...

  8. NumPy 百题大冲关，冲鸭！

    角色名称:NumPy 角色描述:NumPy是一个NASA都在用的扩展库. NumPy提供了许多高级的数值编程技能,如:矩阵数据类型.矢量处理,以及精密的运算库.专为进行严格的数字处理而战斗.是很多大型 ...

  9. pringBoot2.0启用https协议

    SpringBoot2.0之后,启用https协议的方式与1.*时有点儿不同,贴一下代码. 我的代码能够根据配置参数中的condition.http2https,确定是否启用https协议,如果启用h ...

  10. opencv 图片识别

    # -*- coding: utf-8 -*-"""Created on Fri Nov 22 21:35:12 2019 @author: Administrator& ...