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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
javascript实现日历效果
Jun 17 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 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 简单数组排序实现代码
2009/08/05 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
python 字符串常用函数详解
2019/09/11 Python
django框架中间件原理与用法详解
2019/12/10 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
美容院经理岗位职责
2014/04/03 职场文书
法人代表任命书范本
2014/06/05 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
2016年教代会开幕词
2016/03/04 职场文书