js调出上下文菜单的实例

前端之家收集整理的这篇文章主要介绍了js调出上下文菜单的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了js调出上下文菜单的实例代码分享给大家供大家参考,具体如下:

原理

  当用户点击右键时会触发一个contextmenu事件,默认会触发浏览器的默认的上下文菜单,通过手动阻止这个默认行为,然后再显示自定义的上下文菜单,当用户单击时隐藏这个菜单即可。

代码

1、html

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调出上下文菜单方法,希望对大家的学习有所帮助。

猜你在找的JavaScript相关文章