<!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. bzoj 1880: [Sdoi2009]Elaxia的路线【spfa+拓扑排序】

    有趣啊 先spfa分别求出以s1,t1,s2,t2为起点的最短路,然后把在s1-->t1或者s2-->t2最短路上的边重新建有向图,跑拓扑最长路即可 #include<iostrea ...

  2. 洛谷 P1941 飞扬的小鸟【dp】

    设f[i][j]为在坐标(i,j)时的最小点击次数,转移的话从i-1向上飞或者向下掉转移,注意转移完了之后要把管子部分赋值为inf #include<iostream> #include& ...

  3. js点赞浮动特效

    js自己封装的库: (function($) { $.extend({ tipsBox: function(options) { options = $.extend({ obj: null, //j ...

  4. Activiti6.0教程 Service用途剖析 （二）

    这节我们学习下Activiti的7大对象,首先我们从ProcessEngine接口开始看. /* Licensed under the Apache License, Version 2.0 (the ...

  5. match email address

    [A-Za-z0-9\._+]+@[A-Za-z]+\.(com|org|edu|net)

  6. 转】[1.0.2] 详解基于maven管理-scala开发的spark项目开发环境的搭建与测试

    场景 好的,假设项目数据调研与需求分析已接近尾声,马上进入Coding阶段了,辣么在Coding之前需要干马呢?是的,“统一开发工具.开发环境的搭建与本地测试.测试环境的搭建与测试” - 本文详细记录 ...

  7. win10 SQL Server 配置管理器无法启动

    解决方法: 用管理员方式打开命令行 进入 “C:\Program Files (x86)\Microsoft SQL Server\140\Shared”,(有的是“C:/Program Files/ ...

  8. Microsoft函数调用约定

    Microsoft函数调用约定 对于所有调用共有的约定:ebx.ebp.esi.edi都是calle-save,即由被调用的函数负责它们的保存(如果被调用函数用到了这些寄存器的话) 先看函数调用发生了 ...

  9. 数据结构 - 静态顺序线性表的实行（C语言）

    数据结构 - 静态顺序线性表的实行(C语言) 1 获取元素操作 对于线性表的顺序存储结构来说,如果我们要实现GetElem操作,即将线性表L中的第i个位置元素值返回,其实是非常简单的. 只要i的数值在 ...

  10. android将对象序列化到文件：直接写文件与用Serializable接口的对比

    1.用文件读写1024个对象的日志 10-09 16:12:44.493 6385-6385/com.example.tt.downtest D/Serializable_TAG: write 102 ...