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 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
js检测用户输入密码强度
Oct 22 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
如何实现js拖拽效果及原理解析
May 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
在vue中动态修改css其中一个属性值操作
Dec 07 #Vue.js
You might like
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
教师读书活动总结
2014/05/07 职场文书
本科毕业生自荐信
2014/05/26 职场文书
食品安全处置方案
2014/06/14 职场文书
班风口号
2014/06/18 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
公司人事管理制度
2015/08/05 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
Golang流模式之grpc的四种数据流
2022/04/13 Golang