<!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. 解决weblogic页面和控制台乱码问题

    转自:https://blog.csdn.net/u010995831/article/details/53283746 之前一直有碰到weblogic各种乱码问题,要不就是页面乱码,要不就是控制台乱 ...

  2. bzoj 1178: [Apio2009]CONVENTION会议中心（少见做法掉落！）【贪心+二分】

    数组若干+手动二分一个的算法,bzoj rank8 ===============================废话分割线=================================== 我我 ...

  3. dllMain函数

    Windows在加载DLL的时候,需要一个入口函数,就如同控制台或DOS程序需要main函数.Win32程序需要WinMain函数一样.一些例子中,DLL并没有提供DllMain函数,应用工程也能成功 ...

  4. vijos1846 [NOIP2013] 华容道【最短路】

    传送门:https://vijos.org/p/1983 (其实noip的题各个oj都会有的,就不贴其它传送门了) 这道题真的是,怎么说,我都不知道怎么评价了= =.果然数据量小的题怎么暴力都可以过. ...

  5. ACM_数数？诶？这么简单？

    数数?诶?这么简单? Time Limit: 2000/1000ms (Java/Others) Problem Description: 当看到GDUFE-GAME宣传海报上提到"场内人员 ...

  6. Windows7运行无法记录历史命令问题解决

    Windows7运行无法记录历史命令,每次都需要手动敲命令,解决方法如下: 1.任务栏中右键,选择"属性"菜单: 2.在弹出框中的"[开始]菜单"选项卡的隐私区 ...

  7. 转-NSUserDefaults 简介，使用 NSUserDefaults 存储自定义对象

    转自:http://my.oschina.net/u/1245365/blog/294449 摘要 NSUserDefaults适合存储轻量级的本地数据,一些简单的数据(NSString类型的)例如密 ...

  8. 443 String Compression 压缩字符串

    给定一组字符,使用原地算法将其压缩.压缩后的长度必须始终小于或等于原数组长度.数组的每个元素应该是长度为1 的字符(不是 int 整数类型).在完成原地修改输入数组后,返回数组的新长度.进阶:你能否仅 ...

  9. jQuery select年月日(生日)选择器

    实际项目中,在用户的个人中心,编辑用户资料时经常会遇到选择生日选项的问题. 因为我项目工程中没有使用如jQuery UI的插件性下拉列表,所以选择select + option的原生方式,实现选择器. ...

  10. JavaScript异常处理和事件处理

    异常捕获 1.异常:      当JavaScript引擎执行JavaScript代码时,发生了错误,导致程序停止运行 2.异常抛出:      当异常产生,并且将这个异常生成一个错误信息 3.异常捕 ...