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 相关文章推荐
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python autoescape标签用法解析
2020/01/17 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
环保建议书500字
2014/05/14 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
长城导游词300字
2015/01/30 职场文书
贪污检举信范文
2015/03/02 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
护士工作心得体会
2016/01/25 职场文书
党组织结对共建协议书
2016/03/23 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Android 中的类文件和类加载器详情
2022/06/05 Java/Android