阻止鼠标右键，自定义右键菜单

最新推荐文章于 2024-07-18 14:12:27 发布

不净之心

最新推荐文章于 2024-07-18 14:12:27 发布

阅读量215

点赞数

分类专栏：前台&美工文章标签： php xhtml 前端 ViewUI

本文链接：https://blog.csdn.net/pyzheng/article/details/84467406

版权

前台&美工专栏收录该内容

118 篇文章 1 订阅

订阅专栏

[url]http://www.webtall.com/index.php/archives/643[/url]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{margin:0; padding:0;}
#ul1{width:100px; background:#ccc; position:absolute; display:none; list-style-type:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阻止鼠标右键，自定义右键菜单</title>
<script type="text/javascript">
document.oncontextmenu=function(ev)  //oncontextmenu事件为鼠标右键
{
	var oEvent=ev||event;
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;  //获取上下滚动条
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  //获取左右滚动条
	var oUl=document.getElementById('ul1');  //获取UL

	oUl.style.display='block';
	oUl.style.left=oEvent.clientX+scrollLeft+'px';  //设置X轴的位置
	oUl.style.top=oEvent.clientY+scrollTop+'px';    //设置Y轴的位置

	return false;  //阻止浏览器默认事件
};
document.onclick=function()
{
	var oUl=document.getElementById('ul1');
	oUl.style.display='none';
};

</script>
</head>

<body>
<ul id="ul1">
	<li><a href="http://www.webtall.com">五指前端</a></li>
	<li><a href="http://www.webtall.com">五指前端</a></li>
	<li><a href="http://www.webtall.com">五指前端</a></li>
</ul>
</body>
</html>