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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
Vue自定义多选组件使用详解
Sep 08 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
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
调试php程序的简单步骤
2019/10/04 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
详解python中的模块及包导入
2019/08/30 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
英国网上超市:Ocado
2020/03/05 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
体现团队精神的口号
2014/06/06 职场文书
个人授权委托书格式
2014/08/30 职场文书
八项规定整改方案
2014/10/01 职场文书
青岛导游词
2015/02/12 职场文书
教师节主持词开场白
2015/05/29 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android