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

主要运用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. 【js】字符串反转（倒序）的多种处理方式

    今天发布一篇关于字符串反转的几种方式(一种问题的解决方案不是只有一种). 方式1: 这种方式比较简单,推荐使用 字符串转数组,反转数组,数组转字符串. split(""):根据空字 ...

  2. java利用反射打印出类的结构

    1 输入一个类名:java.lang.String将打印出String类定义的结构,例如: public final class java.lang.String { public java.lang ...

  3. stm32 SPI-FLASH W25Q64

    The W25Q64BV array is organized into 32,768 programmable pages of 256-bytes each. Up to 256 bytes ca ...

  4. CentOS7安装CDH 第九章：CDH中安装Kafka

    相关文章链接 CentOS7安装CDH 第一章:CentOS7系统安装 CentOS7安装CDH 第二章:CentOS7各个软件安装和启动 CentOS7安装CDH 第三章:CDH中的问题和解决方法 ...

  5. 美化WebApi,使其统一返回Json格式

    博客部分代码来自其他博主,暂时找不到你的博文连接,如果您觉得我的代码中引入了您的代码或者文章,可在下方把您的博客文章写在下面,谢谢!!! WebApi有两种返回数据格式,一种是XML,一种是Json, ...

  6. js中的forEach和map的区别

    我们先来看两者之间的相同之处 var arr = ['a','b','c','d']; arr.forEach(function(item,index,arr){ //item表示数组中的每一项,in ...

  7. Codeforces #366 (Div. 2) D. Ant Man （贪心）

    https://blog.csdn.net/liangzhaoyang1/article/details/52215276  原博客 原来好像是个dp题,不过我看了别人的博客使用贪心做的 复杂度(n^ ...

  8. MySQL进阶12-- 数据类型介绍: 数值型/字符型/日期型-- 正负溢出保护/枚举型/set型/时间戳

    /*进阶12 SQL 数据类型介绍 数值型: 整数: Tinyint(1b) < mediumint(3b)<smallint(2b) <int(4b) <bigint(8b) ...

  9. MySQL之表连接-> 内连接，左外连接，右外链接，全连接

    1.首先创建student库 create database student; 2. 在数据库中创建boy表 和 girl表, mysql> create table boy( -> bo ...

  10. 使用jQuery快速高效制作网页交互特效---jQuery选择器

    一.什么是jQuery选择器 Query选择器继承了CSS与Path语言的部分语法,允许通过标签名.属性名或内容对DOM元素进行快速.准确的选择, 而不必担心浏览器的兼容性,通过jQuery选择器对页 ...