我们在网页中很多都有右键菜单的功能，一般点击右键显示的是浏览器默认的菜单选项，那么我们直接如何通过css+js实现html的右键菜单呢？这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

实现原理

在HTML中基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单击事件（onclick事件是鼠标的左键单击事件），我们可以监听oncontextmenu事件，阻止默认的浏览器右键菜单e.preventDefault();然后显示我们想要显示的菜单信息，当我们单击其中某一项的时候，就执行我们设定的动作，然后将弹出窗口关闭。

办公资源网址导航 https://www.wode007.com

实现代码

css代码:

<style>

html,body{

    width : 100%;height : 100%; margin: 0;padding: 0;

}

#menu{

    width : 100px;

    padding: 10px;

    border : 1px solid #ddd;

    visibility : hidden;

    position : absolute;

}

</style>

html代码:

<body id="container">

	<div id="menu">

	    <a href="javascript:history.back();">后退</a>

	    <hr/>

	    <a href="javascript:history.back();">前进</a>

	</div>

</body>

js代码:

<script>

window.oncontextmenu=function(e){

    e.preventDefault();//取消默认的浏览器自带右键

    var evt = window.event || arguments[0];

    var menu=document.getElementById('menu');//获取右键菜单

    var container = document.getElementById('container');//获取区域

    /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/

    var rightedge =container.clientWidth-evt.clientX;

    var bottomedge =container.clientHeight-evt.clientY;

    console.log(container.clientHeight);

    /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/

    if (rightedge < menu.offsetWidth){

        menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";

    }else{ /*否则，就定位菜单的左坐标为当前鼠标位置*/

        menu.style.left = container.scrollLeft + evt.clientX + "px";

    }

    /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/

    if(bottomedge < menu.offsetHeight){

        menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";

    }else{/*否则，就定位菜单的上坐标为当前鼠标位置*/

        menu.style.top = container.scrollTop + evt.clientY + "px";

    }

    /*设置菜单可见*/

    menu.style.visibility = "visible";

}

window.onclick=function(e){//关闭右键菜单

 	document.getElementById('menu').style.visibility = 'hidden';　//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能

}

</script>

这是个简单例子，由于contextmenu事件支持所有 HTML 元素，这意味者你可以给不同的元素，自定义不同的右键菜单，由于contextmenu事件会冒泡传播，子节点上触发的事件，在父节点上也会触发，所以应该调用对应的函数或者设置对应的属性值来阻止事件冒泡。

html鼠标自定义右键菜单：css+js实现自定义html右键菜单的更多相关文章

  1. 在桌面右键创建html,css,js文件

    1.在开始里面输入regedit,进入注册表编辑器. 2.打开HKEY_CLASSES_ROOT项. 3.打开.html/.css/.js项. 4.右键新建项,起名ShellNew. 5.新建字符串值 ...

  2. 【工具相关】web-HTML/CSS/JS Prettify的使用

    一,打开Sublime Text,代码如下面所示. 二,鼠标右键--->HTML/CSS/JS Prettify--->Prettify Code.代码如图所示,明显的代码变得整齐了.

  3. 自定义鼠标右键（层叠式菜单：cascading menu）(文件系统右键、文件夹系统右键和桌面鼠标右键)

    转载:http://www.cnblogs.com/killerlegend/p/3575391.html 转载:http://www.cnblogs.com/shouce/p/5101001.htm ...

  4. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  5. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  6. IIS7的集成模式下如何让自定义的HttpModule不处理静态文件（.html .css .js .jpeg等）请求

    今天将开发好的ASP.NET站点部署到客户的服务器上后,发现了一个非常头疼的问题,那么就是IIS7的应用程序池是集成模式的话,ASP.NET项目中自定义的HttpModule会处理静态文件(.html ...

  7. CSS+JS实现兼容性很好的无限级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  8. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 什么是 JVM ？

    什么是 JVM ? 解析:不仅仅是基本概念,还有 JVM 的作用. 答:JVM,即 Java Virtual Machine,Java 虚拟机.它通过模拟一个计算机来达到一个计算机所具有的的计算功能. ...

  2. 搞清楚C语言指针

    Part 0:为什么要写这篇文章 C语言中的指针是C语言的精髓,也是C语言的重难点之一. 然而,很少有教程能把指针讲的初学者能听懂,还不会引起歧义. 本文章会尝试做到这一点,如有错误,请指出. Par ...

  3. python IDE pycharm的安装与使用

    Python开发最牛逼的IDE——pycharm (其实其它的工具,例如eclipse也可以写,只不过比较麻烦,需要安装很多的插件,所以说pycharm是最牛逼的) pycharm,下载专业版的,不要 ...

  4. 在MyEclipse中设置jdk

    在MyEclipse中设置jdk的三处地方:1 选中项目右键菜单properties -->java Compiler 2 windows菜单中Preferences-->myeclips ...

  5. EAS：基于网络转换的神经网络结构搜索 | AAAI 2018

    论文提出经济实惠且高效的神经网络结构搜索算法EAS,使用RL agent作为meta-controller,学习通过网络变换进行结构空间探索.从指定的网络开始,通过function-preservin ...

  6. 离职冷静期文件.doc

    <中华人民共和国民法典>通过十三届全国人大三次会议表决,将于2021年1月1日起施行,其中#离婚冷静期#备受关注.多方人士表示,离婚冷静期设立的出发点,不是对婚姻自由的一种破坏,而是让当事 ...

  7. Dedecms 修改当前位置样式

    当前列表页间隔符样式修改 后台-->系统基本参数-->核心设置-->栏目位置的间隔符号 只有二级位置栏目时的间隔符去除 找到include文件中的typelink.class.php ...

  8. 备份、恢复数据库（Dos命令提示符下）_数据库安装工具_连载_1

    Dos命令提示符下: 备份.恢复数据库,是不是很简单啊,是的,当你20年不碰MS SQL,是不是又忘记了呢,答案也许也是吧,^_^虽然在程序中执行SQL代码时,很讨厌那个Go,正如MySQL中那个分号 ...

  9. ComplexHeatmap|根据excel表绘制突变景观图（oncoplot）

    本文首发于“生信补给站”:https://mp.weixin.qq.com/s/8kz2oKvUQrCR2_HWYXQT4g 如果有maf格式的文件,可以直接oncoplot包绘制瀑布图,有多种展示和 ...

  10. SSH免密登录详解

    SSH免密登录详解 SSH(Security Shell)安全外壳协议,是较为可靠的,专为远程登录会话和其他网络服务提供安全保证的协议. ​ 对于传统的网络服务程序(例如,FTP,Telnet等)来说 ...