JS怎么实现自定义鼠标右击菜单
这篇文章给大家分享的是有关JS怎么实现自定义鼠标右击菜单的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
为扎兰屯等地区用户提供了全套网页设计制作服务,及扎兰屯网站建设行业解决方案。主营业务为成都网站建设、成都网站设计、扎兰屯网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
自定义鼠标右击菜单要素:
禁止页面默认右击事件
设置右击菜单的样式以及菜单出现的位置(通过捕获鼠标点击位置来确定菜单的位置)
鼠标在指定控件(区域)上右击时显示菜单(默认菜单隐藏,点击鼠标右键时显示)
效果图
代码如下:
HTML代码
Document 右击显示菜单
HTML
JS代码
关于菜单的定位主要是在第一个if语句部分,后面为验证按钮效果。
menu1.style.left和menu1.style.top用于对菜单进行定位,由css样式表可知menu1的position属性定位为absolute,style.top定位相对于离它最近的position属性值不为static的父辈元素,此处即为body。
menu的位置需要根据页面布局的具体情况来判断是e.offsetX/Y、e.clientX/Y或是其它,此处加上document.documentElement.scrollTop是考虑加上滚动条的情况(实际上这个例子里面并没有滚动条)。
window.onload = function() { //以下为自定义右击菜单 document.oncontextmenu = function(e) { //阻止执行浏览器默认右击事件 e.preventDefault(); //聊天室好友列表 if (document.getElementById("menu-friend")) { var menu1 = document.getElementById("menu-friend"); menu1.style.display = "block"; document.getElementById("contain-friend").onmousedown = function(e) { //菜单定位 menu1.style.left = e.offsetX + "px"; menu1.style.top = document.documentElement.scrollTop + e.clientY + "px"; //alert(menu1.style.top) if (document.getElementById("contain-friend")) { if (e.button == 2) { menu1.style.visibility = "visible"; } else { menu1.style.visibility = "hidden"; } } } } } if (document.getElementById("btn1")) { document.getElementById("btn1").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单一" } } if (document.getElementById("btn2")) { document.getElementById("btn2").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单二" } } return false; //与e.preventDefault();功能相同,但是必须放在最后否则在return后面的内容均不执行 }
JavaScript文件
CSS样式表
1/*自定义右击菜单*/
.contain { background-color: #D1CEBC; height: 100px; width: 300px; } .menu { width: 150px; background-color: white; visibility: hidden; position: absolute; box-shadow: 0px 0px 10px #D1CEBC } .menu-item { background-color: #fff; margin: 0; } .menu-item-btn { width: 146px; margin: 2px; border: 0; text-align: left; padding-left: 60px; padding-top: 5px; padding-bottom: 5px; background-color: #fff; color: #000; } .menu-item-btn:hover { background-color: #D1CEBC; }
感谢各位的阅读!关于JS怎么实现自定义鼠标右击菜单就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前题目:JS怎么实现自定义鼠标右击菜单
当前路径:http://scyanting.com/article/gsesog.html