自定义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. CentOS下永久修改主机名

    永久修改主机名 [root@centos7 ~]# vim /etc/hostname 打开之后将原来的名字改成你想换的名字 [root@centos7 ~]# cat /etc/hostname 查 ...

  2. html格式化输出JSON( 测试接口)

    将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.stringify 函数就可以了,因为此函数还有不常用的后面2个参数. 见MDN https://developer.mozilla ...

  3. iOS 玩转推送通知

    转自:http://www.cocoachina.com/ios/20160316/15665.html 前言 推送通知,想必大家都很熟悉,关于原理之类的,这里就不过多阐述.在这里我们主要介绍下iOS ...

  4. Codeforces Round #595 (Div. 3) D2Too Many Segments，线段树

    题意:给n个线段,每个线段会覆盖一些点,求删最少的线段,使得每个点覆盖的线段不超过k条. 思路:按右端点排序,之后依次加入每个线段,查询线段覆盖区间内的每个点,覆盖的最大线段数量,如果不超过k,那就可 ...

  5. 导出excel时，跳转新空白页，不要跳转怎么改

    导出excel的时候,偶尔会出现跳转到一个新页面再导出excel js中用window.open()做跳转 不想让它跳转到新页面,需要加一个隐藏的iframe <iframe name=&quo ...

  6. springboot使用api操作HBase之shell

    HBase的基本读写流程写入流程读取流程HBase的模块与协作HBase启动RegionServer失效HMaster失效HBase常用的Shell命令进入shellhelp命令查询服务器状态查看所有 ...

  7. Hexo+Github个人博客搭建 | 实战经验分享

    概述 第一次尝试搭建属于自己的博客,并且成功了,非常开心. 很久之前就想搭建一个博客,可是也一直没有行动,最近在逛B站的时候发现一个up主(CodeSheep)的一个视频 <手把手教你从0开始搭 ...

  8. NodeJS4-8静态资源服务器实战_构建cli工具

    Cli(command-line interface),中文是 命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些),把上述写的包做成Cli工具. ...

  9. Django之视图层与模板层

    目录 视图层 小白必会三板斧 HttpResponse render redirect JsonResponse 前后端分离 FBV CBV 给CBV加装饰器 模板层 模板语法 模板传值 过滤器 语法 ...

  10. getX，getY,getScrollX,getScrollY,ScrollTo(),ScrollBy()辨析

    前言:前两天看了自定义控件,其中有一些东西我觉得有必要深入理解一下 以下图为例: getX(),getY()返回的是触摸点A相对于view的位置 getRaw(),getRawY()返回的是触摸点B相 ...