<!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. 869C

    dp 我好像很zz... 想了好长好长时间,然后没想出来,怒掉rating... 其实我们可以吧三种颜色两两计算,因为这样加入第三种颜色不会影响之前的方案,那么我们跑一个dp,计算数量分别为a,b的方 ...

  2. 关于ArcGis for javascrept之FeatureLayer类与GraphicsLayer类

    FeatureLayer: ArcGIS for Server发布的要素服务或者地图服务中的图层 构造方法: myFeatureLayer = new esri.layers.FeatureLayer ...

  3. bat批处理文件夹内文件名的提取

    有时候会在做某些东西的时候 我们要提取某个文件夹的所有文件名,一个一个打出来那不是 现实的 所以这个时候就用到了一个比较简便而又快捷的方法 在所在的文件夹内新建一个a.txt 在a.txt编辑DIR ...

  4. bzoj 3307: 雨天的尾巴【树剖lca+树上差分+线段树合并】

    这居然是我第一次写线段树合并--所以我居然在合并的时候加点结果WAWAWAMLEMLEMLE--!ro的时候居然直接指到la就行-- 树上差分,每个点建一棵动态开点线段树,然后统计答案的时候合并即可 ...

  5. Ubuntu 18 安装 wps

    本来有三种方法 1. 软件中心 安装最简单 2. 命令行snap 安装 如果没有安装snap 先安装 sudo apt install snapd 然后安装wps sudo snap install ...

  6. 转载：4412环境搭建：arm-linux-gcc: 没有那个文件或目录

    4412环境搭建:arm-linux-gcc: 没有那个文件或目录 2014年10月15日 ⁄ 环境搭建 ⁄ 共 993字 ⁄ 字号 小 中 大 ⁄ 评论 11 条 ⁄ 阅读 6,125 次 最近弄了 ...

  7. Android系统的启动流程

    手机启动后首先会通过执行BootLoader来启动Linux内核,BootLoader是所有嵌入式设备开机启动执行的第一行代码,linux内核在启动过程中会加载各种设备的驱动同时初始化数据结构,并且开 ...

  8. 转】RMySQL数据库编程指南

    原博文出自于: http://blog.fens.me/category/%E6%95%B0%E6%8D%AE%E5%BA%93/page/2/ 感谢! Posted: Sep 24, 2013 Ta ...

  9. vs2015如何添加webservice 的web服务引用

  10. 【Hibernate】多对多关系的表达

    User.hbm.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate ...