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 07 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
微信上传视频文件提示(推荐)
Nov 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
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
python切换hosts文件代码示例
2013/12/31 Python
Python实现的检测网站挂马程序
2014/11/30 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
董事长岗位职责
2013/11/30 职场文书
元旦联欢会主持词
2014/03/26 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
政审证明材料
2015/06/19 职场文书
生日赠语
2015/06/23 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
比较几种Redis集群方案
2021/06/21 Redis