自定义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="#">分享</a></li>

<li><a href="#">收藏</a></li>

<li><a href="#">举报</a></li>

</ul>

</div>

</body>

</html>

实现效果

JavaScript 自定义html元素鼠标右键菜单的更多相关文章

  1. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  2. js自定义鼠标右键菜单

    document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...

  3. OpenLayers 3 之 加入地图鼠标右键菜单

    加入右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu.当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...

  4. Html鼠标右键菜单代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Jquery如何禁止鼠标右键菜单

    jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...

  6. 禁止按键F5和禁止鼠标右键菜单 js代码

    <script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window ...

  7. jquery-11 如何制作鼠标右键菜单

    jquery-11 如何制作鼠标右键菜单 一.总结 一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...

  8. Qt creator 创建鼠标右键菜单 (不新建类)

    界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...

  9. 如何在C#添加鼠标右键菜单

    C#添加鼠标右键方法步骤: 1 选中要添加右键功能的Form或者控件,打开控件的设计页面. 2 从工具箱中找到ContextMenuStrip控件,将这个控件拖曳到Form或者控件的设计页面上.这时系 ...

随机推荐

  1. CocoaPods 详解之----更新篇

    CocoaPods 大概是 2011 年出现的开源组件管理工具(目前已支持 Objective-C 和 Swift),近年来普及率越来越高,几乎已是所有 Cocoa 开源项目的标配.另外,很多大点的团 ...

  2. linux命令之head、tail命令详解

    head 语法 例子 tail 语法 例子 head和tail组合用法举例 head 语法 head [-n -k ]... [FILE]... 例子 默认是显示开头前10行. head /etc/p ...

  3. Python字符串学习

    Python字符串(不可变的): 一.相关的运算: 1.字符串的拼接: str = str1 + str2 2.字符串的重复: print(str * 3) 3.下标访问字符串某个字符: str[1] ...

  4. Tesseract-OCR 字体库下载地址

    https://github.com/tesseract-ocr/tesseract/wiki/Data-Files

  5. CYPRESS最新的USB3.0控制器

    CYPRESS近日发布了其最新的USB3.0控制器,产品序号为CX3,主要是针对高像素摄像头方面的应用,接口支持MIPI的CSI-2,并不支持传统的基于并口的数据传输模式. MIPI(Mobile I ...

  6. leetcode -- 最长回文子串

    题目: 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab" 注意: ...

  7. Es6中箭头函数与普通函数的区别

    Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...

  8. python 中 and or

    在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样,但是它们并不返回布尔值:而是,返回它们实际进行比较的值之一. 一.and: 在布尔上下文中从左到右演算表达式的值,如果布尔上下 ...

  9. skipping archived logs of thread 1 from sequence 29 to 46; already backed up

    问题描述:删除归档的备份,在进行归档的重新备份,提示:skipping archived logs of thread 1 from sequence 29 to 46; already backed ...

  10. ASP.NET Core知多少（13）：路由重写及重定向

    背景 在做微信公众号的改版工作,之前的业务逻辑全塞在一个控制器中,现需要将其按厂家拆分,但要求入口不变. 拆分很简单,定义控制器基类,添加公用虚方法并实现,各个厂家按需重载. 但如何根据统一的入口参数 ...