自定义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. 转:轻松把玩HttpClient之封装HttpClient工具类(一)（现有网上分享中的最强大的工具类）

    搜了一下网络上别人封装的HttpClient,大部分特别简单,有一些看起来比较高级,但是用起来都不怎么好用.调用关系不清楚,结构有点混乱.所以也就萌生了自己封装HttpClient工具类的想法.要做就 ...

  2. [AHOI2017初中组]guide

    题目描述 农场主John最近在网上买了一辆新车,在购买汽车配件时,John不小心点了两次"提交"按钮.导致汽车上安装了两套GPS系统,更糟糕的是John在使用GPS导航时,两套系统 ...

  3. ios开发入门- WebView使用

    转自:http://mahaile.blog.51cto.com/2891586/1021515/ 目标 : webview使用 在一些移动app中,有时程序会载入 外表的html 界面, andro ...

  4. react-native 相对项目路径导入组件 ___ babel-plugin-module-resolver

    babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器.这个插件允许你添加新的" ...

  5. Spring Data-Spring整合Hibernate基于JPA规范

    JPA:由 Sun 公司提供了一对对于持久层操作的标准(接口+文档) Hibernate:是 Gavin King 开发的一套对于持久层操作的自动的 ORM 框架. Hibernate JPA:是在 ...

  6. DRF Django REST framework 之 认证组件（五）

    引言 很久很久以前,Web站点只是作为浏览服务器资源(数据)和其他资源的工具,甚少有什么用户交互之类的烦人的事情需要处理,所以,Web站点的开发这根本不关心什么人在什么时候访问了什么资源,不需要记录任 ...

  7. C和C++从零开始系列(二)

    今天说一下 C和C++ 的if 条件语句. 在实际编程中,会经常有逻辑判断,比如,输入的数值参数中,如果是奇数,输出This is uneven. 如果是偶数,输出 This is even. 我们在 ...

  8. Docker学习-jenkins+github实现持续集成和部署

    上一篇介绍了docker环境搭建,本篇继续深入,结合jenkins利用docker-compose容器编排简单介绍下如何实现个人学习的持续集成/部署. 本篇学习曲线: 1.安装/运行jenkins容器 ...

  9. 【重温基础】15.JS对象介绍

    从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 [Cute-JavaScript]系列文章中. 关于[Cute-JavaScript ...

  10. 《一头扎进》系列之Python+Selenium框架设计篇3- 价值好几K的框架，狼来了，狼来了....，狼没来，框架真的来了

    1. 简介 前边宏哥一边一边的喊框架,就如同一边一边的喊狼来了!狼来了!.....这回是狼没有来,框架真的来了.从本文开始宏哥将会一步一步介绍,如何从无到有地创建自己的第一个自动化测试框架.这一篇,我 ...