我们在网页中很多都有右键菜单的功能，一般点击右键显示的是浏览器默认的菜单选项，那么我们直接如何通过css+js实现html的右键菜单呢？这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。
实现原理
在HTML中基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单击事件（onclick事件是鼠标的左键单击事件），我们可以监听oncontextmenu事件，阻止默认的浏览器右键菜单e.preventDefault();然后显示我们想要显示的菜单信息，当我们单击其中某一项的时候，就执行我们设定的动作，然后将弹出窗口关闭。
实现代码
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事件会冒泡传播，子节点上触发的事件，在父节点上也会触发，所以应该调用对应的函数或者设置对应的属性值来阻止事件冒泡。
css/html 空格，html空格符的显示、标示方式【html空格代码】
css/html 空格，html空格符的显示、标示方式。在html里面空格的话,你直接敲打出来的空格是不可以的,这篇文章将通过html和css中设置显示空格的实现总结
HTML/CSS代码风格指南(Google)
本文档定义了HTML/CSS的编写格式和风格规则,适用于HTML/CSS文件，包括GSS文件。如果你要编辑代码，先花几分钟看看它的代码风格，如果它这么做，那你也应该这么做。
基于 HTML5 Canvas 的交互式地铁线路图
地图稍微内容有点多，要全部展示，字显得有点小了，但是没关系，可以按照需求放大缩小，字体和绘制的内容并不会失真，毕竟都是用矢量绘制的~
如何用 Python 解析 HTML
用一些简单的脚本，可以很容易地清理文档和其它大量的 HTML 文件。但是首先你需要解析它们。我决定为自己创建一个项目来解决这个问题。 一种方法是搜索未使用的现有图像文件。
你可能从未听说过的15种HTML元素方法！
我们来讨论HTML和DOM之间的区别。显然，一个普通<table>元素就是HTML。您可以在.html的文件中使用它。它有一组属性影响它的外观和行为方式。这就是HTML，不过它与JavaScript无关。
KeyPress 和KeyDown 、KeUp之间的区别
input 框在输入查询内容之后，按回车键居然有两种不同的表现形式（input 框没有绑定键盘事件），谷歌和火狐功能正常，但IE在按了回车键以后居然自动调用方法。
在html中做嵌套页面_客户端实现html页面的嵌套
如何在客户端利用html、或js将一个html页面嵌套在另一个页面中，这篇文章主要讲解以下几种方式：IFrame引入 、<object>方式、Behavior的download方式 、使用JQuery的load方法
VSCode中快捷输入HTML代码
VSCode中有一些快捷编辑HTML的方法，能大大提高工作效率，在这记录一些。文是在VSCode下编写的，其他编辑器如Atom、Sublime Text都支持Emmet
HTML发展历程
HTML是超文本标记语言的缩写，不同于C或JAVA等编程语言，HTML由标签组成。通过标签可以在网页中插入文字、图片、链接、音频、视频等元素，进而描述网页。和Windows一样，随着技术的发展，HTML经历了多次版本更新
了解HTML及运行原理
HTML（HyperText Marked Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言。我们在浏览网页时看到的一些丰富的影像、文字、图片等内容都是通过HTML表现出来的
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!