自定义oncontextmenu

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
*{margin:0;padding:0;list-style:none;}
#menu1{display:none; position:absolute;left:0;top:0;width:100px; border:1px solid #000; overflow:hidden;}#menu1 li{width:100%; height:30px; line-height:30px; text-align:center; background:#ccc; border-bottom:1px solid #000;}
#menu1 li:hover{ background:#c00; color:#fff;}
#ul1 li{float:left;width:200px; height:30px; line-height:30px; text-align:center; background:#ccc; border:1px solid #000; margin:10px;}</style>
<script>window.onload = function(){var oUlMenu = document.getElementById("menu1");var aMLi = oUlMenu.children;var oUl = document.getElementById("ul1");var aLi = oUl.children;var currentLi = null;for(var i = 0; i < aLi.length; i++){aLi[i].oncontextmenu = function(ev){currentLi = this;var oEvent = ev || event;oUlMenu.style.display = "block";oUlMenu.style.left = oEvent.clientX + "px";oUlMenu.style.top = oEvent.clientY + "px"return false;//禁止默认的鼠标右击出现选项弹窗，和oncontextmenu配合使用
        };}aMLi[0].onclick = function(){currentLi.parentNode.removeChild(currentLi);oUlMenu.style.display = "none";    };aMLi[1].onclick = function(){currentLi.style.background = "red";oUlMenu.style.display = "none";    };aMLi[2].onclick = function(){currentLi.style.background = "green";oUlMenu.style.display = "none";    };};</script>
</head><body><ul id="menu1"><li>删除</li><li>变红</li><li>变绿</li>
</ul><ul id="ul1"><li>00000000000000000</li><li>11111111111111</li><li>22222222222222</li><li>3333333333333</li><li>4444444444444</li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/heboliufengjie/p/4307181.html

自定义oncontextmenu相关推荐

右键脚本html,js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 #menu { height: 200px; width: 50px; border: 1px solid gray; back ...
稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键...
[索引页] [源码下载] 稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键, 程序常用配置参数作者:webabcd ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
js实现右键单击打开自定义的菜单
今天分享一个,单击鼠标右键弹出自定义菜单,选中不同菜单选项,实现其对应功能首先先自已定义一个菜单 <div id="menu"><ul><li ...
SuperMap IS.NET自定义Action添加Mark
碰到很多添加一些客户端标示的需求,SuperMap IS.NET中这样的问题解决方法一般有两种情况,一个是使用自定义Action方式获取坐标,然后添加到CustomLayer层上,另外就是获取鼠标点击 ...
SharePoint Welcome.ascx 控件自定义样式的另类解决方式
SharePoint网站中默认的welcome菜单如下样式是固定的如下: 下拉列表如下: 现在需要把菜单颜色改成白色,下拉列表中只保留Sign in as Different User 和 Sign ...
pyqt5 treeview鼠标右键菜单事件_【动手实践】使用 Vue 自定义指令实现右键菜单...
本文来自于神奇的程序员前言浏览器里右键时会有一个默认的菜单,在我的开源项目中正好有自定义右键菜单的需求,在npm库找了下与之相关的包,发现都是以组件形式实现的,感觉那种做法太过繁琐. 于是,我就 ...
html模拟右键系统菜单,HTML中自定义右键菜单功能
我们使用的应用系统很多都有右键菜单功能.但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现原理和实现代码. 实现原理在HTML语 ...
[读码时间] 自定义右键菜单
说明:代码取自网络,CSS中注释为笔者学习时添加,JS中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...

自定义oncontextmenu

自定义oncontextmenu相关推荐

最新文章

热门文章