<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>网页右键菜单</title>

<!--

思路：

1.写出右键点击事件；

2.写出菜单功能；

3.关联右键功能和菜单，学习使用定位

-->

<style>

#test {

    width:200px;

    height:200px;

    background-color:green;

}

ul.context-menu {

    padding:0;

    margin:0;

    display:none;

    position:absolute; /*只能是absolute或fixed*/

}

ul.context-menu li {

    list-style:none;

    width:100px;

    height:20px;

    line-height:20px;

    text-align:center;

    border:solid 1px;

    background-color:#CCC;

    display:block;

}

ul.context-menu li:hover {

    background-color:#C0C0C0;

    cursor:context-menu;

}

</style>

<script>

//var t = document.getElementById("test");

window.onload = function(){

    var clicked_ele;//全局变量，用于记录被右键单击呼出菜单的元素

    //去掉默认的contextmenu事件，否则会和右键事件同时出现。

    document.getElementById("test").oncontextmenu = function(e){

        e.preventDefault();

    };

    document.getElementById("ct").oncontextmenu = function(e){

        e.preventDefault();

    };

    document.getElementById("test").onmousedown = function(e){

        if(e.button ==2){//右键

            var x = e.clientX;//获取鼠标单击点的X坐标

            var y = e.clientY;//获取鼠标单击点的Y坐标

            //设置菜单的位置

            document.getElementById("ct").style.left = x + "px";

            document.getElementById("ct").style.top = y + "px";

            document.getElementById("ct").style.display = "block";

            clicked_ele = this;

        }else if(e.button ==0){ //左键

            document.getElementById("ct").style.display = "none";

        }else if(e.button ==1){ //按下滚轮

            document.getElementById("ct").style.display = "none";

        }

    }

    document.getElementById("test").onblur = function(e){

        document.getElementById("ct").style.display = "none";

    }

    //给每个菜单项添加事件处理

    var items = document.getElementsByClassName("context-menu-item");

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

        //在定义onclick事件之前，c必须设置取消test元素的onblur事件，否则onclick事件失效，因为click先触发的是test元素的onblur事件，该事件有移除菜单的操作，才会导致后面的代码失效

        items.item(i).onmouseover = function(e){

            document.getElementById("test").onblur = undefined;

        }

        //鼠标移出菜单时，还是要将test的onblur事件还原

        items.item(i).onmouseleave = function(e){

            document.getElementById("test").onblur = function(e){

                document.getElementById("ct").style.display = "none";

            }

        }

        items.item(i).onclick = function(e){

            e.stopPropagation();//为避免引起其它错误，阻止冒泡很重要

            console.log(this.innerHTML + ":" + clicked_ele.innerHTML);

            document.getElementById("ct").style.display = "none";

        }

    }

}

</script>

</head>

<body>

<ul class="context-menu" id="ct">

<li class="context-menu-item">option1</li>

<li class="context-menu-item">option2</li>

<li class="context-menu-item">option3</li>

</ul>

<div id="test" tabindex="2">我是美腻大方的绿方块</div>

</body>

</html>

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

  1. Context.js 右键菜单

    ContextJS is a lightweight solution for contextual menus. Currently, there are two versions. The fir ...

  2. JS组件系列——Bootstrap右键菜单解决方案：ContextMenu

    前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...

  3. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js实现自定义右键菜单--兼容IE、Firefox、Chrome

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. 关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题

    2015-03-02 更新文章,由于需求修改,更改了flexpaper插件,故增加第9.10.11小节,下载代码时请注意. 先废话几句.最近用到文档在线浏览功能,之前用的是print2flash(一个 ...

  6. js禁止页面复制 禁用页面右键菜单的代码

    js实现禁止页面复制功能.禁用页面右键菜单等功能.  <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...

  7. js禁止默认的右键菜单或出现自定义右键菜单

    1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...

  8. 禁止页面复制功能 js禁止复制 禁用页面右键菜单

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script  t ...

  9. python 通过js控制滚动条拉取全文 通过psutil获取pid窗口句柄，通过win32gui使程序窗口前置 通过autopy实现右键菜单和另存为操作

    1.参考 利用 Python + Selenium 自动化快速截图 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素) 使用python获取系统所有进程PID以及进程名 ...

随机推荐

  1. 【转载】CAS操作

    [本文转载]http://blog.csdn.net/hsuxu/article/details/9467651 CAS CAS:Compare and Swap, 翻译成比较并交换. java.ut ...

  2. Linux 常用命令五 软链接和硬链接

    一.软链接 相当于windows的快捷方式,当源文件不存在时,软链接失效. 创建软链接: wang@wang:~/workpalce/python$ ls -l 总用量 -rw-rw-r-- wang ...

  3. hdu 3007【最小圆覆盖-随机增量法模板】

    #include<iostream> #include<cstdio> #include<cmath> #include<algorithm> usin ...

  4. 小程序 video 层级，原生组件

    原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 scroll-view.swiper. ...

  5. 【原创】《从0开始学Elasticsearch》—集群健康和索引管理

    内容目录 1.搭建Kibana2.集群健康3.索引操作 1.搭建Kibana 正如<Kibana 用户手册>中所介绍,Kibana 是一款开源的数据分析和可视化平台,因此我们可以借助 Ki ...

  6. 转-Mac下Apache Tomcat安装配置

    ava Web如果稍微知道一点,一般对Tomcat都不会陌生,Apache是普通服务器,本身只支持html即普通网页,可以通过插件支持PHP,还可以与Tomcat连通(单向Apache连接Tomcat ...

  7. 转-用Eclipse 开发Dynamic Web Project应用程序

    简介:本文仅简单介绍基于Eclipse开发Dynamic Web Project应用下的JSP,Servlet及TOMCAT数据源的配置和开发. 软件环境: Eclipse Java EE IDE f ...

  8. windows deintall 12c client

    1.unintall: close all oracle app C:\app\client\CICadmin\product\12.1.0\client_1\deinstall deinstall ...

  9. Elixir安装

    参考:https://laravel.com/docs/5.2/elixir 1. 安装node 去这里下载 2.可以用淘宝的cnpm加速! npm install -g cnpm --registr ...

  10. Oracle 表-初步涉水不深（第一天）

    oracle 关系型数据库 注释:面对大型数据处理,市场占有率40%多(但是目前正往分布式转换) 故事:本来一台大型计算机才能处理的数据,美国科学家用100台家用电脑连接,成功处理了数据.. tabl ...