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 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
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
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
php开发工具有哪五款
2015/11/09 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
详解Python的Django框架中的中间件
2015/07/24 Python
python动态网页批量爬取
2016/02/14 Python
深入学习python的yield和generator
2016/03/10 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Python中内建模块collections如何使用
2020/05/27 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
自荐书范文范例
2014/02/13 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
初中团支书竞选稿
2015/11/21 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL
Python序列化模块JSON与Pickle
2022/06/05 Python