js 右键菜单
<!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 右键菜单的更多相关文章
- Context.js 右键菜单
ContextJS is a lightweight solution for contextual menus. Currently, there are two versions. The fir ...
- JS组件系列——Bootstrap右键菜单解决方案:ContextMenu
前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...
- js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现自定义右键菜单--兼容IE、Firefox、Chrome
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题
2015-03-02 更新文章,由于需求修改,更改了flexpaper插件,故增加第9.10.11小节,下载代码时请注意. 先废话几句.最近用到文档在线浏览功能,之前用的是print2flash(一个 ...
- js禁止页面复制 禁用页面右键菜单的代码
js实现禁止页面复制功能.禁用页面右键菜单等功能. <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制 ...
- js禁止默认的右键菜单或出现自定义右键菜单
1.屏蔽默认的右键菜单 js: document.getElementById('myimg').oncontextmenu=function(){return false;} jquery: $(' ...
- 禁止页面复制功能 js禁止复制 禁用页面右键菜单
<body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: <script t ...
- python 通过js控制滚动条拉取全文 通过psutil获取pid窗口句柄,通过win32gui使程序窗口前置 通过autopy实现右键菜单和另存为操作
1.参考 利用 Python + Selenium 自动化快速截图 利用 Python + Selenium 实现对页面的指定元素截图(可截长图元素) 使用python获取系统所有进程PID以及进程名 ...
随机推荐
- C++实现二叉树(建树,前序,中序,后序)递归和非递归实现
#include<iostream> #include<string.h> #include<stack> using namespace std; typedef ...
- Linux下安装Redis及搭建主从
Linux下安装Redis 首先在官网下载对应版本的redis包,这里本人使用的是redis-4.0.8.tar.gz. 然后在服务器中存放redis包的路径下执行tar –vxf redis-4 ...
- 把pdf传给kindle
对于不是纯文本的,最好主题不要用convert,虽说用了之后可以转换为大小更合适的字体,但是会破坏本来PDF的格式,变得更加不合适阅读
- php安装的扩展php -m可以看到,但是phpinfo()看不到,php-fpm关闭了重新打开还是不行?
问答 问答详情 php安装的扩展php -m可以看到,但是phpinfo()看不到,php-fpm关闭了重新打开还是不行? centos apache linux html php 3.2k 次浏 ...
- centos mysql数据库忘记密码修改
1.vim /etc/my.cnf 2.在[mysqld]中添加 skip-grant-tables 例如: [mysqld]skip-grant-tablesdatadir=/var/lib/mys ...
- ROS学习笔记三:编写第一个ROS节点程序
在编写第一个ROS节点程序之前需要创建工作空间(workspace)和功能包(package). 1 创建工作空间(workspace) 创建一个catkin_ws: #注意:如果使用sudo一次 ...
- spoj DYNALCA - Dynamic LCA
http://www.spoj.com/problems/DYNALCA/ 此题link.cut要求不能换根,当然也保证link时其中一个点必定已经是根. 方法: void link(Node *x, ...
- New Year Tree CodeForces -620E
这个题有一个技巧:把颜色压到一个long long 上. #include<cstdio> #include<algorithm> #include<cstring> ...
- 构造 HDOJ 5400 Arithmetic Sequence
题目传送门 题意:问有多少个区间,其中存在j使得ai + d1 == ai+1(i<j) && ai + d2 == ai+1 (i>j) 构造:用c1[i], c2[i] ...
- xml小练习
挑选你熟悉省份,制作xml城市列表 ----- 必备城市基本信息 10个城市 --- 一定要有属性对城市列表 添加DTD约束 <?xml version="1.0" enco ...