<!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. git合并相关问题(copy)

    [说明:资料来自http://gitbook.liuhui998.com/3_3.html] 一个Git仓库可以维护很多开发分支.现在我们来创建一个新的叫”experimental”的分支: $ gi ...

  2. bzoj 4405: [wc2016]挑战NPC【带花树】

    把每个筐子拆成3个,分别表示放0/1/2个,然后把这三个点两两连起来,每一个可以放在筐里的球都想这三个点连边. 这样可以发现,放0个球的时候,匹配数为1,放1个球的时候,匹配数为1,放2个球的时候,匹 ...

  3. JavaScript 数组相关基础方法

    文章来源于:https://www.cnblogs.com/dolphinX/p/3353590.html 创建数组 构造函数 1.无参构造函数,创建一空数组 var a1=new Array(); ...

  4. greater()和less()的使用

    greater和less是头文件<xfunctional>中定义的两个结构.下面看它们 的定义,greater和less都重载了操作符(). // TEMPLATE STRUCT grea ...

  5. Tree Recovery POJ - 2255

    Tree Recovery POJ - 2255 根据树的前序遍历和中序遍历还原后序遍历. (偷懒用了stl的find) #include<iostream> #include<st ...

  6. Apusic中间件结合MyEclipse进行远程调试记录

    Apusic中间件结合MyEclipse进行远程调试记录. 在金蝶域中正常部署应用. 启动金蝶中间件时使用"startapusic -ds"命令. 在MyEclipse的Run-- ...

  7. css超出部分显示省略号

    单行文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. 关于表单清空的细节(reset函数或者class="reset"属性)

    在需要清空的表单的情况下, 如果是在页面中 那么就添加属性 class="reset"  也即是 <button class="reset" value= ...

  9. Android 中保存数据到文件中

    1.在安卓开发中,会遇到保存数据到手机中以及从手机中获取数据的情况 /** * 把数据存放到手机内存中 * * @param number * @param password * @return */ ...

  10. Android开发中实现桌面小部件

    详细信息请参考原文:Android开发中实现桌面小部件 在Android开发中,有时候我们的App设计的功能比较多的时候,需要根据需要更简洁的为用户提供清晰已用的某些功能的时候,用桌面小部件就是一个很 ...