event document.oncontextmenu 自定义默认右键菜单

最新推荐文章于 2022-10-25 16:03:41 发布
最新推荐文章于 2022-10-25 16:03:41 发布
阅读量436 收藏
点赞数
原文链接：http://www.cnblogs.com/mingjixiaohui/p/5268961.html
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div1{
				position: absolute;
				width: 100px;
				background: #ccc;
				border: 1px solid black;
				display: none;
			}
		</style>
		<script>
		
			document.oncontextmenu = function(ev){
				var oEvent = ev || event;
				var oDiv = document.getElementById("div1");
				
				oDiv.style.display = "block";
				oDiv.style.left = oEvent.clientX +"px";
				oDiv.style.top = oEvent.clientY +"px";
				
				return false;//阻止默认事件
			}
			//点击其他地方的时候消失右键菜单
			document.onclick = function(){
				var oDiv = document.getElementById("div1");
				oDiv.style.display = "none";
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li>1111</li>
				<li>2222</li>
				<li>3333</li>
				<li>4444</li>
			</ul>
		</div>
		
	</body>
</html>

　　

转载于:https://www.cnblogs.com/mingjixiaohui/p/5268961.html

weixin_34133829
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
右键菜单contextmenu事件
Yang Yong 的博客
02-28 3205
概述 通过单击鼠标右键可以调出自定义上下文菜单。 这个事件的目标是发生用户操作的元素。 代码 // html &amp;lt;div id=&quot;myDiv&quot;&amp;gt; 右键单击我得到一个自定义的上下文菜单 &amp;lt;/div&amp;gt; &amp;lt;ul id=&quot;myMenu&quot; style=&quot;position: absolute;visibility: h
在博客园博文中添加自定义右键菜单的方法详解
10-15
在博客园博文中添加自定义右键菜单是一种增强用户体验的方式，尤其对于长篇文章，它可以提供更便捷的功能访问，如快速回到顶部、点赞和评论。本文将深入探讨如何利用DOM鼠标事件来实现这一功能。 首先，我们需要...
javascript小技巧
温水中的青蛙
05-16 772
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture();  事件按键 event.keyCode event.shiftKey event.altKey event.ctr
自制浏览器右键菜单
熊猫教主的专栏
09-06 512
STEP1 拦截浏览器右键菜单事件$(document).on("contextmenu", function() { /**/ return false; });STEP2 获取鼠标位置，显示自定义菜单div$(document).on ("contextmenu", function() { var e = event || window.event; $
前端学习-JS初级
springxing的博客
06-29 436
今天我们分享js的初级，也是有许多语法，还是要多敲多练才行。每日一句:new、相信自己有能力，那么你就真的会有！ 让我们一起用技术提升美好事物发生的概率！多想，多记，多试，总结错误，多敲多练编程语言：逻辑强 控制行为 主动标记语言：被读取 被动硬件（输入，输出，CPU，硬盘，内存），软件（系统软件，应用软件）js是基于对象和事件的解释性的编程语言js的组成：1.ES（ECMAScript）javascript语法标准2.DOM 文档对象模型（Document Object Model）3.BOM 浏览器对象
JavaScript oncontextmenu鼠标右键菜单触发 自定义右键菜单示例
骑着猪猪去拍拖
06-08 1237
JavaScript oncontextmenu鼠标右键菜单触发 自定义右键菜单示例 #div1 { width:100px; height:300px; position:absolute; background-color:#7391C5; display:none;} window.onload = function(){ var oDiv = document.getElem
js中如何实现阻止默认行为及实现自定义右键菜单
YY的博客
10-25 2839
js中如何实现阻止默认行为及实现自定义右键菜单
JavaScript 自定义html元素鼠标右键菜单功能
10-15
总结来说，JavaScript实现自定义HTML元素的鼠标右键菜单功能主要是通过监听`oncontextmenu`事件，阻止默认的右键菜单，获取鼠标位置并显示自定义菜单，以及处理全局点击事件来隐藏菜单。这个功能可以广泛应用于网页...
禁止鼠标右键及svg中自定义右键菜单
04-09
通过监听`contextmenu`事件并调用`preventDefault()`方法，可以阻止浏览器的默认右键菜单。而在SVG中，我们可以结合CSS和JavaScript创建自定义菜单，以提供更丰富的用户体验。这些技术广泛应用于各种Web应用程序，...
js阻止默认右键的下拉菜单方法
10-18
总的来说，JavaScript的`event.preventDefault()`方法是阻止默认右键下拉菜单的关键。在使用时要权衡用户体验和功能需求，确保做出的决策符合网站或应用的整体设计。通过这种方式，你可以创建更定制化的交互体验，使...
js自定义右键菜单特效代码
03-20
// 阻止默认右键菜单 if (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA') { // 检查不在输入框内 var menu = document.getElementById('customMenu'); // 获取自定义菜单元素 menu....
右击阻止默认事件和右击显示菜单
qq_54357054的博客
05-27 2077
阻止右击默认事件方式: 1. 阻止页面上的默认事件：（在页面上的右击事件都将被禁止） document.oncontextmenu = function () { // e.preventDefault() // 或者 都可以 return false; } 2. 阻止元素上的默认右击事件： <div id="app"> <div class="box"></div> <div class="..
Html网页控制用JavaScript代码：禁止复制文本，禁止鼠标右键菜单等
cnds123的专栏
07-09 1418
Html网页控制用JavaScript代码， 这些做法仅仅是对网站做了一层简单的防护，禁止选中文字、复制文本，禁止鼠标右键菜单等，应付一般的“小白”。
javascript 常用操作
r798303142b的专栏
10-13 1130
事件源对象  event.srcElement.tagName  event.srcElement.type捕获释放  event.srcElement.setCapture();   event.srcElement.releaseCapture(); 事件按键  event.keyCode  event.shiftKey  event.altKey  event
js鼠标右键点击事件
热门推荐
胖胖的博客
10-22 2万+
方法一 首先取消右键的系统默认弹窗 document.oncontextmenu = function(e){ return false //或者 e.preventDefault() } 用onmouseup或者onmousedown代替点击事件 onclick事件无法用e.button判断鼠标左右键。 document.onmouseup = function(e){ if(e.butt...
oncontextmenu 事件
weixin_30367169的博客
09-14 368
用户点击鼠标右键时触发并打开上下文菜单 禁用： document.oncontextmenu = function() { 　　return false;} 编辑自定义右键打开菜单 document.oncontextmenu = function() { 　　return false; } document.body.addEventListener('mousedown'...
获取或设置当前窗口contextmenu事件的事件处理函数
ab023171的博客
12-11 424
在浏览器中 鼠标右键点击会显示默认的 自带的菜单，那么如何禁止 和更改呢？ 1) 禁止右键 window.oncontextmenu = funcRef;　　 funcRef是个函数引用 　　　　 举例说明： window.oncontextmenu = function () { 　 return false; 　 } 　　 该窗口禁止使用右键 ...
js事件中级（默认行为，拖拽）
weixin_40512519的博客
09-14 298
默认行为：浏览器自带的行为。 阻止默认/右键事件： &lt;script&gt; document.oncontextmenu=function(){ return false;//阻止默认事件 } &lt;/script&gt; 例子： 屏蔽右键菜单    弹出自定义右键菜单 只能输入数字的输入框   keydown  keyup事件的区别 //屏蔽...
document.oncontextmenu页面右键菜单功能(2008-09-04 17:49:31| 分类： jsp+html+js+Ajax)
luckykapok918的专栏
12-10 1189
今天修改别人的页面右键菜单位置问题，虽然对页面的右键功能不是很熟悉，不过还好能上网.问题的现象是这样的当在没有滚动条的情况下右键菜单位置正 常，但出现滚动条下方的位置时，菜单位置不对，和鼠标位置相差很远。(很明显应该是滚动条出现引起的问题，不过苯啊，开始竟然没看出来)   很老实的一步一步跟着原来程序员的代码走：java里面通过    StringBuilder sb = new StringBu
document.oncontextmenu = function
最新发布
04-28
通过使用document.oncontextmenu函数，我们可以在网页的任意位置添加自定义右键菜单，比如弹出自己设计的菜单或者禁止右键操作等。同时，我们也可以通过该属性来控制浏览器默认的右键菜单，比如隐藏浏览器自带的右键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值