javascript全局自定义鼠标右键菜单


Posted in Javascript onDecember 08, 2020

本文实例为大家分享了javascript全局自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下

前言

html全局自定义鼠标右键菜单

一、效果展示

javascript全局自定义鼠标右键菜单

二、源代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 #TextBox{
 width: 200px;
 height: 200px;
 border: 1px solid #000;
 }
 #menu{
 position: absolute;
 border: 1px solid #000;
 }
 #menu > div:nth-child(2){
 border-top: 1px solid #000;
 }
 #menu > div:nth-child(3){
 border-top: 1px solid #000;
 }
 #menu > div:nth-child(4){
 border-top: 1px solid #000;
 }
 #menu > div:hover{
 cursor: pointer;
 background-color: #0078E7;
 }
 </style>
 </head>
 <body>
 <div id="TextBox">
 <div id="menu">
 <div>自定义菜单</div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 </div>
 </div>
 <script type="text/javascript">
 window.onload = function(){
 var ul = document.getElementById("menu"); //获取ul节点对象
 ul.style.display = "none";
 /*为document绑定鼠标右键菜单事件*/
 document.oncontextmenu = function(e){
  var _event = window.event||e; //事件对象
  var x = _event.clientX; // 鼠标的x坐标
  var y = _event.clientY; //鼠标的y坐标
 
  ul.style.display = "block";
  ul.style.left = x + "px"; //改变ul的坐标
  ul.style.top = y + "px"; 
  //阻止默认行为
  if(_event.preventDefault){
  _event.preventDefault(); //标准格式
  }else{
  _event.returnValue = false; //IE格式
  }
 }
 document.onclick = function(){
  ul.style.display = "none";
 }
 }
 </script>
 </body>
</html>

总结

以上就是html全局自定义鼠标右键菜单的方式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
javascript中递归的两种写法
Jan 17 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
javascript局部自定义鼠标右键菜单
Dec 08 #Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 #Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 #Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 #Vue.js
You might like
adodb与adodb_lite之比较
2006/12/31 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
浅析Django中关于session的使用
2019/12/30 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
医生自荐信
2013/10/11 职场文书
年度考核自我鉴定
2014/02/02 职场文书
个人校本研修方案
2014/05/26 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL