本文实例讲述了js调出上下文菜单的实例代码,分享给大家供大家参考,具体如下:
原理
当用户点击右键时会触发一个contextmenu事件,默认会触发浏览器的默认的上下文菜单,通过手动阻止这个默认行为,然后再显示自定义的上下文菜单,当用户单击时隐藏这个菜单即可。
代码
1、html
按钮1 按钮2 按钮3
2、js
// 添加contextmenu事件 var right = document.getelementbyid(right); eventutil.addeventlistener(right, contextmenu, function(event) { event = eventutil.getevent(event); eventutil.preventdefault(event); var menu = document.getelementbyid(menu); // 获取鼠标右击时的坐标,并设置上下文菜单出现位置 page = eventutil.getpageposition(event); menu.style.left = page.pagex + px; menu.style.top = page.pagey + px; menu.style.visibility = visible; }); // 添加隐藏上下文菜单事件 eventutil.addeventlistener(document, click, function(event) { var menu = document.getelementbyid(menu); menu.style.visibility = hidden; });
代码出现的eventutil在这篇文章有介绍: 《js跨浏览器的事件侦听器和事件对象的使用方法》
以上就是本文的全部内容,教大家js调出上下文菜单的方法,希望对大家的学习有所帮助。