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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
Jquery 基础学习笔记之文档处理
May 29 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
Seajs源码详解分析
Apr 02 Javascript
js实现图片粘贴到网页
Dec 06 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设计聊天室步步通
2006/10/09 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php生成excel文件的简单方法
2014/02/08 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
Python实现购物车功能的方法分析
2017/11/10 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
python和JavaScript哪个容易上手
2020/06/23 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
线程同步的方法
2016/11/23 面试题
农村改厕实施方案
2014/03/22 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书