JS右键与菜单操作

最新推荐文章于 2025-09-16 16:53:54 发布

最新推荐文章于 2025-09-16 16:53:54 发布 · 299 阅读

文章标签：

#JavaScript #Jquery #ViewUI

jquery+easyui 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了使用JavaScript构建右键菜单的基本操作，并提供了如何在页面上响应右键点击事件的方法。此外，还展示了如何通过JavaScript禁用浏览器的右键功能。这些技巧对于网页开发人员在构建具有交互式右键菜单功能的应用时非常有用。

JS右键菜单的一些基本操作

1. 建右键菜单栏：

<div id="menu" class="easyui-menu" style="width:150px;">
	<div id="m-refresh">刷新</div>
	<div class="menu-sep"></div>
	<div id="m-closeall" data-options="iconCls:'icon-cancel'">全部关闭</div>
</div>

2. 当在页面点击右键时触发事件：

<script type="text/javascript">
	$(document).ready(function(){
		$("#table").bind('contextmenu',function(e){
			$('#menu').menu('show', {
				left: e.pageX,
				top: e.pageY
			});
			return false;
		});
	}
</script>

或直接：$("tr").bind...
hh=this.rowIndex;

3. 确定在table的哪一行点击的右键得此行数据

<script type="text/javascript">
	$(document).ready(function(){
		var table=document.getElementById("table");
		var rows=table.getElementByTagName("tr");
		var hh=null;//行号
		for(var i in rows){//给tr绑定click事件
			rows[i].onclick=rowClick();
		}
	}
	function rowClick(e){//点击table时get行号
		hh=this.rowIndex;
		var length=this.cells[0].childNodes.length;//得到当前行第一列的数据长度
		var c1=this.cells[0].childNodes[0].value;//得到当前行第一列的每个项数据内容
	}
</script>

4. JS禁用右键：

<script type="text/javascript">
	document.onkeydown = function() {
		if (event.keyCode == 116){
			event.keyCode = 0;
			event.returnValue = false;
		}
	}
	document.oncontextmenu = function() {
		alert("禁止右键！");
		event.returnValue = false;
	}
</script>