JavaScript 自定义html元素鼠标右键菜单功能


Posted in Javascript onDecember 02, 2019

自定义html元素鼠标右键菜单

实现思路

在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值

编码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
  window.onload = function(){
  var menu = document.getElementById('menu');
  document.body.oncontextmenu = function(e){ // 自定义body元素的鼠标事件处理函数
    var e = e || window.event;
    e.preventDefault(); //阻止系统右键菜单 IE8-不支持
    // 显示自定义的菜单调整位置
    let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置
    let scrollLeft =
        document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置
    menu.style.display = 'block';
    menu.style.left = e.clientX + scrollLeft + 'px';
    menu.style.top = e.clientY + scrollTop + 'px';
  }
  // 鼠标点击其他位置时隐藏菜单
  document.onclick = function(){
    menu.style.display = 'none';
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  p{
    margin-top: 200px; 
  }
  ul li{
    list-style-type: none;
    margin: 10px 0;
    text-align: center;
  }
  #menu{
    border:1px solid #ccc;
    background: #eee;
  position: absolute; // 设置菜单为绝对位置
    width: 100px;
    height: 120px;
    display: none;
  }
</style>
</head>
<body style="overflow:auto">
  <div id="box" style="height:5000px; width:5000px">让body元素出现滚动条用的div</div>
  <div id="menu">
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分享</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >收藏</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >举报</a></li>
    </ul>
  </div>
</body>
</html>

实现效果

JavaScript 自定义html元素鼠标右键菜单功能

总结

以上所述是小编给大家介绍的JavaScript 自定义html元素鼠标右键菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
React实现todolist功能
Dec 28 Javascript
VUE 动态组件的应用案例分析
Dec 02 #Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 #Javascript
vue 动态表单开发方法案例详解
Dec 02 #Javascript
vue 开发之路由配置方法详解
Dec 02 #Javascript
vue 开发企业微信整合案例分析
Dec 02 #Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 #Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 #Javascript
You might like
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
phpfans留言版用到的install.php
2007/01/04 PHP
php项目打包方法
2008/02/18 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
公司拓展活动方案
2014/02/13 职场文书
高一军训的心得体会
2014/09/01 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers