JS右键菜单

最新推荐文章于 2021-06-05 08:03:17 发布

luckystar2008

最新推荐文章于 2021-06-05 08:03:17 发布

阅读量483

点赞数

CC 4.0 BY-SA版权

文章标签： generator html function

本文链接：https://blog.youkuaiyun.com/qincidong/article/details/6791821

Front End 专栏收录该内容

119 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面通过JavaScript实现了自定义的右键点击上下文菜单功能。菜单包括四个选项：添加、删除、修改和查看，每个选项链接到百度网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
		ul li {
			list-style:none;
		}
  </style>
  <script>
	// 右键
	document.oncontextmenu = function() {
		var context = document.all('context');
		context.style.display = "block";
		var x = event.clientX; // event是内置对象，表示当前正发生的事件对象。event.clientX:鼠标的x坐标
		var y = event.clientY;
		context.style.left = x;
		context.style.top = y;
		return false;
	}
  </script>
 </HEAD>

 <BODY>
	<div style="display:none;font-size:12px;position:absolute;border:3px solid blue;width:120px;background-color:green;" id="context">
		<ul>
			<li><a href="http://www.baidu.com">添加</a></li>
			<li><a href="http://www.baidu.com">删除</a></li>
			<li><a href="http://www.baidu.com">修改</a></li>
			<li><a href="http://www.baidu.com">查看</a></li>
		</ul>
	</div>
 </BODY>
</HTML>