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学习(二)javascript常见问题总结
Jan 02 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
javascript实现拼图游戏
Jan 29 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
php删除数组元素示例分享
2014/02/17 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python使用udp实现聊天器功能
2018/12/10 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
PyTorch-GPU加速实例
2020/06/23 Python
keras输出预测值和真实值方式
2020/06/27 Python
python 实现图片裁剪小工具
2021/02/02 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
大学生文员专业个人求职信范文
2014/01/05 职场文书
自行车广告词大全
2014/03/21 职场文书
员工生日活动方案
2014/08/24 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书