JavaScript 自定义html元素鼠标右键菜单
自定义html元素鼠标右键菜单
实现思路
在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值
编码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var menu = document.getElementById('menu');
document.body.oncontextmenu = function(e){ // 自定义body元素的鼠标事件处理函数
var e = e || window.event;
e.preventDefault(); //阻止系统右键菜单 IE8-不支持
// 显示自定义的菜单调整位置
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置
let scrollLeft =
document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置
menu.style.display = 'block';
menu.style.left = e.clientX + scrollLeft + 'px';
menu.style.top = e.clientY + scrollTop + 'px';
}
// 鼠标点击其他位置时隐藏菜单
document.onclick = function(){
menu.style.display = 'none';
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
p{
margin-top: 200px;
}
ul li{
list-style-type: none;
margin: 10px 0;
text-align: center;
}
#menu{
border:1px solid #ccc;
background: #eee;
position: absolute; // 设置菜单为绝对位置
width: 100px;
height: 120px;
display: none;
}
</style>
</head>
<body style="overflow:auto">
<div id="box" style="height:5000px; width:5000px">让body元素出现滚动条用的div</div>
<div id="menu">
<ul>
<li><a href="#">分享</a></li>
<li><a href="#">收藏</a></li>
<li><a href="#">举报</a></li>
</ul>
</div>
</body>
</html>
实现效果
JavaScript 自定义html元素鼠标右键菜单的更多相关文章
- jQuery自定义Web页面鼠标右键菜单
jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...
- js自定义鼠标右键菜单
document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...
- OpenLayers 3 之 加入地图鼠标右键菜单
加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
- Html鼠标右键菜单代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery如何禁止鼠标右键菜单
jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...
- 禁止按键F5和禁止鼠标右键菜单 js代码
<script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window ...
- jquery-11 如何制作鼠标右键菜单
jquery-11 如何制作鼠标右键菜单 一.总结 一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...
- Qt creator 创建鼠标右键菜单 (不新建类)
界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...
- 如何在C#添加鼠标右键菜单
C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...
随机推荐
- 创建raid5(3个raid2个备份)
创建raid5(3个raid2个备份) 1.首先创建五个磁盘 2.创建RAID5并设置2块备份故障盘: 3.可查看下阵列的详细信息(Spare Devices数量为1): 4.将磁盘阵列格式化为ext ...
- k8s 开船记-首航:博客站点从 docker swarm 切换到 k8s
昨天晚上,我们将博客站点的生产环境从 docker swarm 集群切换到了 k8s 集群,开船到目前,航行非常平稳,可以说首航成功! k8s 集群是我们用10台阿里云服务器自己搭建的,1台 mast ...
- 放大镜效果 --- enlarge.js
html页面: 注释:遮罩层的大小取决于 ===>layerwidth/layerheight = largewidth/largeheight enlarge.js页面 /* jqu ...
- MVC效验器
步骤一:导入依赖 <!--数据效验--> <dependency> <groupId>org.hibernate</groupId> <artif ...
- python输出日志到文件(每天一个日志)
import logging from logging.handlers import TimedRotatingFileHandler logger = logging.getLogger('sim ...
- 04Shell流程控制
流程控制 if 单分支结构 if 条件测试 then 命令序列 fi 双分支结构 if 条件测试 then 命令序列 else 命令序列 fi 多分支结构 if 条件测试 1 then 命令序列 [e ...
- 11条MySQL规范,你知道的有几个?
一.数据库命令规范 · 所有数据库对象名称必须使用小写字母并用下划线分割 · 所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) · 数据库对象的命名 ...
- Ubuntu系统下arm-linux-gcc交叉编译环境搭建过程
搭建所需环境Linux版本:Ubuntu 14.10 交叉编译器版本:arm-linux-gcc-4.4.3资源链接 何为交叉编译环境搭建交叉编译环境,即安装.配置交叉编译工具链.在Ubuntu环境下 ...
- 《Java知识应用》Linux系统下word转PDF
仅供学习,如需商用请联系开发商:https://apireference.aspose.com/java/words Jar包下载路径: 链接: https://pan.baidu.com/s/1s7 ...
- 微服务架构 SpringBoot(一)
spring Boot:官网地址 https://spring.io/ 由来: 随着spring组件功能的强大,配置文件也越来越复杂繁琐,背离了spring公司的简洁快速开发原理,2015年就推出Sp ...