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

主要运用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. echarts使用结合时间轴timeline动态刷新案例

    1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  2. ajax+jquery上传图片

    利用ajax进行图片上传,啥也不说了,上代码~ <input type="file" id="uploadImg"> <span  oncli ...

  3. Django中过滤的实现

    过滤模块 安装 >: pip install django-filter 注册应用:settings/dev.py INSTALLED_APPS = [ # 列表过滤模块 'django_fil ...

  4. Python的range和xrange

    range 函数说明:range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列. range示例: >>> r ...

  5. Windows下动态库的制作与使用

    创建静态库

  6. Zabbix监控平台-----深入理解zabbix

    一,Zabbix Web操作深入 (1)创建一个模版,所有的功能几乎都是在模版中定义的 点进新创建的模版查看,模版里几乎可以设定我们需要的所有功能 (2)在模版里创建应用集,应用集的作用就是将众多的监 ...

  7. Activity之launchMode理解

    对于Activity中的四个lauchMode[standard(默认).singleTop.singleTask.singleInstance]的介绍网上已经有大把的文章了,但是在实际应用开发时,对 ...

  8. c++ 构造函数执行顺序

    开辟内存空间. 按照成员变量声明的顺序开始构造成员变量. 如果成员变量在初始化列表中, 就会执行该变量类型的拷贝构造函数. 如果成员变量没有在初始化列表中, 就会执行该变量类型的缺省构造函数. 进入函 ...

  9. Centos7 安装相关软件

    1.安装 wget : yum -y install wget

  10. Nginx设置禁止通过IP访问服务器并且只能通过指定域名访问

    为了避免别人把未备案的域名解析到自己的服务器IP而导致服务器被断网,需要在nginx上设置禁止通过IP访问服务器,只能通过域名访问. 最关键的一点是,在server的设置里面添加这么一行: liste ...