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(视频与PPT)
Dec 27 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 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 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP实现简单的计算器
2020/08/28 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JavaScript 的继承
2011/10/01 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Python pip 常用命令汇总
2020/10/19 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
2014年高考决心书
2014/03/11 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
党校学习党性分析材料
2014/12/19 职场文书
感恩节寄语2015
2015/03/24 职场文书
初二物理教学反思
2016/02/19 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
java设计模式--原型模式详解
2021/07/21 Java/Android