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获取和修改img的src值的方法
Feb 17 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
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
Terran建筑一览
2020/03/14 星际争霸
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
yii2安装详细流程
2018/05/23 PHP
javascript引用对象的方法
2007/01/11 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
bootstrap table实例详解
2017/01/06 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python中index()和seek()的用法(详解)
2017/04/27 Python
python unittest实现api自动化测试
2018/04/04 Python
python flask安装和命令详解
2019/04/02 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
PHP如何自定义函数
2016/09/16 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
仓库班组长岗位职责
2013/12/12 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript