自定义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. 还在用背单词App？使用Python开发英语单词自测工具，助你逆袭单词王！

    学英语广告 最近也许是刚开学的原因,不管是公众号,还是刷抖音,导出都能看到关于学英语.背单词的广告. 不知道现在学生们背单词买的什么辅导材料.反正我们上学那会,<星火阅读>特别的火.记得当 ...

  2. luogu P1417 烹调方案 |dp

    题目背景 由于你的帮助,火星只遭受了最小的损失.但gw懒得重建家园了,就造了一艘飞船飞向遥远的earth星.不过飞船飞到一半,gw发现了一个很严重的问题:肚子饿了~ gw还是会做饭的,于是拿出了储藏的 ...

  3. IO 文件夹的拷贝

    package FileCopy; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ja ...

  4. GlusterFS缺陷

    glusterfs缺陷 转自:http://www.liuwq.com/2017/04/20/glusterfs%E8%AF%A6%E8%A7%A3/ glusterfs 原理.优势.使用范围等 Gl ...

  5. JavaWeb中的MVC 下

    代码较多,请先略过代码,看懂逻辑在研究代码 引入 回顾上一节中的项目,最终的层次结构: 在MVC上中,我们分析了MVC设计模式具备的优点,以及不足,并在其基础上增了Service层用于处理业务逻辑,但 ...

  6. salt

    更新于 3.25 23:16 salt简介 SaltStack是一个服务器基础架构集中化管理平台,具备配置管理.远程执行.监控等功能,基于Python语言实现,结合轻量级消息队列(ZeroMQ)与Py ...

  7. 安装mysql5.7（亲手实操）

    https://files-cdn.cnblogs.com/files/yucoder/%E5%AE%89%E8%A3%85mysql5.7.pdf

  8. CookieUtils-浏览器缓存工具类

    package cn.yonyong.myproject.commons.utils; import javax.servlet.http.Cookie; import javax.servlet.h ...

  9. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  10. Django 之day02，必会知识点

    静态文件配置******* 为什么用户在浏览器中输入的网址能够访问到对应的资源, 前提是后端提前开设该资源的访问,在urls.py文件中进行配置该路由, 如果我的后端没有开设相关的资源,用户是无法访问 ...