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 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
Vue.js的模板语法详解
Feb 16 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
十天学会php(2)
2006/10/09 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
vue中使用codemirror的实例详解
2018/11/01 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python fabric实现远程操作和部署示例
2014/03/25 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
介绍一下Python下range()函数的用法
2013/11/07 面试题
个人简历自我评价范文
2014/02/04 职场文书
工作会议方案
2014/05/21 职场文书
防暑降温通知书
2015/04/27 职场文书
法律意见书范文
2015/06/04 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
ant design charts 获取后端接口数据展示
2022/05/25 Javascript
nginx静态资源的服务器配置方法
2022/07/07 Servers