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


Posted in Javascript onDecember 08, 2020

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

前言

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 TextBox = document.getElementById("TextBox");
 var ul = document.getElementById("menu"); //获取ul节点对象
 ul.style.display = "none";
 /*为document绑定鼠标右键菜单事件*/
 TextBox.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格式
  }
 }
 TextBox.onclick = function(){
  ul.style.display = "none";
 }
 }
 </script>
 </body>
</html>

总结

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

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

Javascript 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
js弹出对话框方式小结
Nov 17 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
基于vue的验证码组件的示例代码
Jan 22 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
在vue中动态修改css其中一个属性值操作
Dec 07 #Vue.js
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
Session的工作方式
2006/10/09 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JSON取值前判断
2014/12/23 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
对python requests发送json格式数据的实例详解
2018/12/19 Python
从0开始的Python学习016异常
2019/04/08 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
食品安全标语
2014/06/07 职场文书
施工单位安全责任书
2014/07/24 职场文书
小学课改工作总结
2015/08/13 职场文书
小学数学教师研修日志
2015/11/13 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers