js实现页面右键自定义功能

最新推荐文章于 2023-05-11 16:04:12 发布
最新推荐文章于 2023-05-11 16:04:12 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： web前台（html、js、css） 文章标签： jquery js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws_blog/article/details/18262897
版权
js实现页面右键自定义功能 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frank index</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
#itemMenu {
	width: 120px;
	height: 69px;
	position: fixed;
	display: none;
}
#itemMenu table tr{
	background: #0080ff;
}
div{
background: #bbb;
margin: 2px auto;
}
</style>
</head>
<body>
	<div id="itemMenu">
		<table width="100%"  cellspacing=1>
			<tr>
				<td style="cursor: default; border: outset 1;" align="center"
					οnclick="create()">create row</td>
			</tr>
			<tr>
				<td style="cursor: default; border: outset 1;" align="center"
					οnclick="update();">modify row</td>
			</tr>
			<tr>
				<td style="cursor: default; border: outset 1;" align="center"
					οnclick="del();">delete row</td>
			</tr>
		</table>
	</div>

	<div class="rows">
		<div id="grp1" class="module">row1</div>
	</div>
	<div class="rows" οncοntextmenu="javascript:showMenu();">
		<div id="grp3" class="module">row2</div>
	</div>
	<div class="rows" οncοntextmenu="javascript:showMenu();">
		<div id="grp2" class="module">row3</div>
	</div>


	<script type="text/javascript">
		$(function() {
			$('.rows').contextmenu(function(e) {
				$('#itemMenu').css({
					'top' : e.pageY,
					'left' : e.pageX,
					'display' : 'block'
				});
				return false;//屏蔽原有的右键菜单
			});
		});
		function create() {
			$('#itemMenu').css('display', 'none');
			alert("create");
		}
		function update() {
			$('#itemMenu').css('display', 'none');
			alert("update");
		}
		function del() {
			$('#itemMenu').css('display', 'none');
			alert("del");
		}
	</script>
</body>
</html>

蚂蚁小帅哥
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js自定义右键菜单
12-19
js自定义右键菜单
js实现右键自定义菜单
10-20
在网页中实现右键自定义菜单的功能，可以让用户根据开发者提供的选项进行操作，而不是仅限于浏览器默认的右键菜单。这个功能在很多交互丰富的网页应用中非常常见，比如编辑器、画板等。 在上述示例中，JavaScript...
js_实现右键菜单功能
妞妞的专栏
01-08 1666
/***实现右键菜单功能*/--%>                                                            根目录            菜单一            菜单二                                              
js自定义右键
shaonian1996
08-23 1982
js自定义右键 思路：1：阻止系统自带右键菜单：使用上下文事件contextmenu            2：先将自定义菜单隐藏在触发上下文事件时显示自定义菜单；            3：点击文档其它处隐藏菜单 结果图示： 代码：html： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="u...
js实现右键菜单功能
weixin_33696822的博客
11-30 150
2019独角兽企业重金招聘Python工程师标准>>> ...
js 屏蔽右键
iteye_10672的博客
08-13 84
document.oncontextmenu=new Function("event.returnValue=false;"); document.onselectstart=new Function("event.returnValue=false;");
js实现自定义右键菜单
10-15
在JavaScript中实现自定义右键菜单是一项常见的交互设计任务，它可以提供更加个性化和功能丰富的用户体验。下面我们将详细探讨如何通过JavaScript来实现这一功能，并结合给出的代码实例进行解析。 首先，我们要了解...
JS简单实现自定义右键菜单实例
11-26
本文将详细介绍如何使用JavaScript实现这样一个自定义右键菜单的实例。 首先，我们需要创建一个用于展示自定义菜单的HTML元素。在这个例子中，我们使用一个`<div>`元素，并将其ID设置为"menu"，以便后续通过...
javascript自定义右键弹出菜单实现方法
10-24
在JavaScript中，自定义右键弹出菜单是一种常见的交互式功能，它允许用户在点击鼠标右键时看到自定义的选项，而不是浏览器默认的上下文菜单。本篇将详细讲解如何利用JavaScript实现这一功能，主要涉及到鼠标事件和...
js-自定义鼠标右击事件
alo_ne的博客
06-05 655
<style> .zz { width: 100px; height: 300px; background-color: red; position: absolute; } </style> `` ```javascript <script> document.oncontextmenu = funct...
javascript自定义右键菜单插件
12-13
本文实例为大家分享了javascript自定义右键菜单插件的具体代码，供大家参考，具体内容如下 1.使用方式 js文件引入[removed][removed] 初始化： let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据，json数组 }) 2.menuItems参数 items = [ { id: 'aa',//菜单id text: 'ccc',//菜单文字，可以是html元素 show: true, /
HTML表格右键事件JS实现
03-15
表格右键事件JS实现。。。。。。。。。。。。。。
用JS实现自定义网页右键菜单。
w2sft的博客
04-06 1402
网页右键菜单，是可以自定义的，用JS就可以实现。 当在网页中点击右键时，出现的是我们自己设定的菜单。 效果展示： 这是默认的右键菜单是完全不同的，可以实现很多功能。 实现这样一个右键菜单，其实很简单。 只需简单三步。 1、首先是风格定义，用于设定菜单的外形、位置： 2、其次，是菜单内容。这里可以增加链接、功能等等： 3、最后是JS代码，用于控制菜单显现...
原生JS实现右键弹出自定义的菜单
qq_41864443的博客
06-10 973
css样式文件：css/onclick.css .mydiv { margin: 20px auto; width: 400px; height: 300px; background-color: rgb(170, 238, 232); position: relative; } .myul { width: 80px; height: 150px; position: absolute; display: none; } .box
如何实现网页自定义右键菜单?
花非花
08-16 7512
 今天群里有人问这个问题，顺手google了一下，搜索到一篇文章,来自:http://www.xuzhi.cn/article.asp?id=21解决思路： 先插入一个隐藏层作为自定义右键菜单，在单击右键时让它显示，并定位到单击位置偏右偏下。 具体步骤： 1.先插入一个作为自定义右键菜单的隐藏层。 item1 item2 item3 item4 item5 item6 2.在单击右键时让隐
html 鼠标右键点击事件,js与jq的鼠标右键点击事件
weixin_42506752的博客
05-31 824
一些网站会利用js脚本或jq脚本来阻击浏览器的右击菜单来展示自定义菜单，这篇博文不谈如何实现右击的自定义菜单(以后有时间会开个单篇来讲，因为涉及到鼠标的定位问题要说很多)，这篇文章来说一下如何利用JQ脚本或JS脚本来实现鼠标右击的自定义事件。JS实现鼠标右击事件示例1：JS作用于整个网页的鼠标右击事件！document.oncontextmenu=function(e){alert('我是...
JS实现自定义右键菜单
HackProgramer的专栏
06-08 673
根目录 菜单一 菜单二 菜单二 go 添加 修改 删除 function showMenu(id){ menuForm.id.value = id; if("" == id){ } else{ popMenu(itemMenu,100,"111"); } event.returnValue=false;
js中如何实现阻止默认行为及实现自定义右键菜单
YY的博客
10-25 2851
js中如何实现阻止默认行为及实现自定义右键菜单
UEditor百度富文本编辑器实现自定义按钮和自定义右键菜单
ZF的博客
11-08 1677
以1.5.0版本为例子： 注意：所有字符串的字母只能小写，不能大写 自定义工具栏按钮 在根目录的ueditor.config.js找到toolbars参数（大于34行），在后面加上自定义字符串： 然后在根目录/lang/zh-cn/zh-cn.js找到labelMap参数（差不多第9行）或者上图的第二个方框里面，加上字符串对之前按钮的悬浮文字提示： 接着在根目录/theme/default/css/ueditor.css写下需要的样式，由于我没写样式，按钮就只有默认的样式： 然后在ueditor.al
js 怎么自动触发 tab 绑定的右键事件
最新发布
qq_27487739的博客
05-11 591
此代码使用 `querySelector` 来获取您要操作的选项卡元素，然后使用 `MouseEvent` 构造函数创建一个 `contextmenu` 事件的自定义事件实例。您可以使用 `dispatchEvent` 方法来在特定元素上触发右键事件（contexmenu 事件），从而达到自动触发 tab 绑定的右键事件的目的。- `bubbles` 和 `cancelable`：设置事件为可冒泡并可取消，以让其和真实的浏览器右键事件相似。button: 2 // 右键。- `view`：设置事件的视图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值