js浏览器鼠标右键出现下拉框事件

最新推荐文章于 2024-08-28 21:44:35 发布

骚年008

最新推荐文章于 2024-08-28 21:44:35 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签：鼠标右键事件

本文链接：https://blog.csdn.net/qq_36245035/article/details/80585822

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				height: 3000px;
			}
			ul{
				width: 200px;
				display: none;
				list-style: none;
				border: 1px solid #333;
				box-shadow: 2px 2px 0px #aaa;
				position: absolute;
			}
			ul li{
				padding: 10px 0 10px 25px;
				box-sizing: border-box;
				font-size: 12px;
				color: #111;
			}
			ul li:nth-child(3){
				border-bottom: 1px solid #ddd;
			}
			ul li:nth-child(6){
				border-bottom: 1px solid #ddd;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>后退</li>
			<li>前进</li>
			<li>重新加载</li>
			<li>另存</li>
			<li>打印</li>
			<li>投射</li>
			<li>翻译成中文</li>
			<li>查看源代码</li>
			<li>检查</li>
		</ul>
	</body>
	<script type="text/javascript">
		var ul = document.querySelector('ul');
		var li = document.querySelectorAll('li');
		
		document.oncontextmenu = function (ev){
			ev = ev || window.event;
//			阻止默认行为，三目，ture是高级版本浏览器，false是ie9以下的浏览器
			ev.preventDefault?ev.preventDefault():ev.returnValue=false;
			ul.style.display = 'block';

//			clientWidth可视宽度
//			offsetWidth从最顶部到目前点击的位置的宽度（到父级的）			
			var gapX = document.documentElement.clientWidth - ul.offsetWidth;
			var Left = (ev.clientX > gapX )? gapX : ev.clientX;
			
//			scrollTop代表滚动条隐藏的高度
//			clientHeight可视高度
//			offsetHeight从最顶部到目前点击的位置的高度
			var gapY = (document.documentElement.scrollTop + document.documentElement.clientHeight - ul.offsetHeight);
			var Top = ev.offsetY > gapY ? gapY : ev.offsetY;
			
//			调试值
//			console.log('clientY '+ev.offsetY)
//			console.log(document.documentElement.scrollTop)
//			console.log(Left)
//			console.log(Top)
	
			ul.style.left = Left + 'px';
			ul.style.top = Top + 'px';
		}
		document.onclick = function (ev){
			ev = ev || window.event;
			ev.preventDefault?ev.preventDefault():ev.returnValue=false;
			ul.style.display = 'none';
		}
		

	</script>
</html>