一个封装的contextmenu兼容FF（右键菜单）

最新推荐文章于 2021-04-17 10:21:48 发布
最新推荐文章于 2021-04-17 10:21:48 发布
阅读量92 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lzh-boy/archive/2008/11/06/1328423.html
版权
<html>
<head>
<style type="text/css">
body
{
background-color: buttonface;
}
.contextmenu
{
width: 100px;
background-color: buttonface;
margin: 0;
padding: 1px;
border: 2px outset;
position: absolute;
z-index: 999;
}
.menuitem
{
cursor: default;
font: menu;
color: MenuText;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-disabled
{
cursor: default;
font: menu;
color: graytext;
padding: 2px 16px 2px 16px;
word-wrap : normal;
}
.menuitem-over
{
cursor: default;
background-color: highlight;
font: menu;
padding: 2px 16px 2px 16px;
color: highlighttext;
}
.menuitem-separator
{
margin: 0;
}
</style>
<script type="text/javascript">
//contextmenu object
//2007-7-3 by Simon.Q
//qq:173513656
function ContextMenu(sId)
{
this.MenuId = sId;
this.MenuItems = [];
}
//menu item object
function MenuItem(bType, sText, sAction, bEnable, sIcon)
{
this.type = bType;
this.text = sText;
this.action = sAction;
this.enable = (bEnable == undefined) ? true : false;
this.icon = sIcon;
}
//add menu item
ContextMenu.prototype.addMenuItem = function(sText, sAction, bEnable, sIcon)
{
this.MenuItems[this.MenuItems.length] = new MenuItem(true, sText, sAction, bEnable, sIcon);
}
//add separator
ContextMenu.prototype.addSeparator = function()
{
this.MenuItems[this.MenuItems.length] = new MenuItem(false, null, null, null, null);
}
//build menu item html
ContextMenu.prototype.addItem = function()
{
var sHtml = "";
for (var i = 0; i < this.MenuItems.length; i++)
{
if (this.MenuItems .type)
{
if (this.MenuItems.enable)
{
sHtml += "<div class=\"menuitem\" οnmοuseοver=\"this.className = 'menuitem-over';\" οnmοuseοut=\"this.className = 'menuitem';\""

if (this.MenuItems.action)
sHtml += " οnclick=\""+ this.MenuItems.action +"\"";

sHtml += ">"+ this.MenuItems.text +"</div>\n";
}
else
{
sHtml += "<div class=\"menuitem-disabled\">"+ this.MenuItems.text +"</div>\n";
}
}
else
{
//sHtml += "<div class=\"menuitem-separator\"></div>\n";
sHtml += "<hr class=\"menuitem-separator\" />\n";
}
}
return sHtml;
}
//create contextmenu to string
ContextMenu.prototype.toString = function()
{
var sHtml = "<div id=\""+ this.MenuId +"\" class=\"contextmenu\" onselectstart=\"return false;\">\n";
sHtml += this.addItem();
sHtml += "</div>\n";
//alert(sHtml);
return sHtml;
}
//build contextmenu
ContextMenu.prototype.createMenu = function()
{
document.write(this);
this.hideMenu();
}

//show contextmenu
ContextMenu.prototype.showMenu = function(e)
{
var obj;
var e, x, y;
var docheight,docwidth,dh,dw;

e = e || window.event;
x = e.clientX;
y = e.clientY;

obj = document.getElementById(this.MenuId);

docwidth   = document.body.clientWidth;
docheight = document.body.clientHeight;

//alert(obj.offsetWidth);
dw = (obj.offsetWidth + x)   - docwidth;
dh = (obj.offsetHeight + y) - docheight;

//alert(dw);
if(dw > 0)
{
obj.style.left = (x - dw) + document.body.scrollLeft + "px";
}
else
{
obj.style.left = x + document.body.scrollLeft + "px";
}
if(dh > 0)
{
obj.style.top = (y - dh) + document.body.scrollTop + "px"
}
else
{
obj.style.top   = y + document.body.scrollTop + "px";
}

obj.style.visibility = "inherit";
}
//hide contextmenu
ContextMenu.prototype.hideMenu = function()
{
document.getElementById(this.MenuId).style.visibility = "hidden";
}

function GoTo()
{
alert("OK");
}
</script>
<script>
var cm = new ContextMenu("divContextMenu");
cm.addMenuItem("item1", "GoTo();");
cm.addSeparator();
cm.addMenuItem("item2", null, false);
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.addMenuItem("item1");
cm.createMenu();
</script>
</head>
<body οncοntextmenu="return false;" οnclick="cm.hideMenu();" οncοntextmenu="cm.showMenu(event);return false;">
<div οncοntextmenu="cm.showMenu(event);">contextMenu</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

转载于:https://www.cnblogs.com/lzh-boy/archive/2008/11/06/1328423.html

weixin_30591551
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Vue 实现 Context-Menu 的思考与总结
weixin_33860722的博客
03-07 3628
简介 先来看最终成果： 操作逻辑为： 点击 ... 弹出 context-menu; 点击非 context-menu 区域，隐藏 context-menu； 点击 context-menu 中的任何一个选项，隐藏 context-menu； 思考 项目是基于 vux 做的，本想着偷懒直接在 vux 库翻组件用，但看了一圈下来，居然这么通用的组件在 vuex 中没有！接着又去翻开源的解决方案...
JS组件Bootstrap ContextMenu右键菜单使用方法
10-22
主要为大家详细介绍了JS组件Bootstrap ContextMenu右键菜单使用方法，感兴趣的小伙伴们可以参考一下
Web contextMenu右键菜单 v2.1
11-09
Web contextMenu右键菜单通过指定的参数，渲染出一个漂亮的右键菜单，并绑定菜单项点击事件。需要的参数有：右键事件e。指定一个事件e，它可能是通过原生js、jq，甚至vue捕捉的；该插件将获取点击的位置，并阻止事件冒泡，屏蔽默认的右键菜单。菜单描述数组menu。menu数组决定了你想渲染出什么样的菜单。特色：侵入性小，这个插件几乎不会影响全局，除了ContextMenu全局变量。兼容性好，在各个屏幕尺寸和有无滚动条的场景都有不错的渲染效果。支持多层嵌套的DOM触发的事件，以最里层为准（详见demo）。支持二级菜单。
oncontextmenu 兼容
a_bun2的博客
08-04 454
公司的网站内容都是一些专业性很强的内容，而且内容都是花钱买来的，所以不想让别人轻而易举的复制过去，就尝试使用js控制一下，但是找了很多js代码，都是不支持firefox，如下 取消选取、防止复制 ie支持 firefox不支持 oncontextmenu="window.event.returnValue=false" ie支持 firefox 出错 window.event ...
简单封装一个vue右键菜单
ZuoZuoDangerou的博客
02-22 446
封装一个简单的右键菜单，要求右键处出现菜单，点击除了菜单部分可以关闭菜单。 组件 <template> <div class="ContextMenu" @click="close" v-show="show"> <ul class="menuMain" ref="menuMain" :style="{ top: y, left: x }"> <slot></slot> </ul> <.
ContextMenu长按事件
qq_43907296的博客
04-17 281
/* ContextMenu菜单就是长按某一个组件，就会在屏幕的中间弹出ContextMenu，这里设置为长按文本框弹出ContextMenu菜单 */ public class MyContextMenu extends AppCompatActivity { /** Called when the activity is first created. */ final static int CONTEXT_MENU_1 = Menu.FIRST;//可以理解为ID设置的最小数值 .
jquery插件ContextMenu设置右键菜单
10-20
主要介绍了jquery插件ContextMenu设置右键菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用contextMenu插件实现Bootstrap table弹出右键菜单
08-31
`contextMenu`插件是一个强大的jQuery插件，能够方便地为任何元素添加自定义的右键菜单，提供了丰富的配置选项和回调函数，以满足各种需求。 在上述代码示例中，首先引入了所有必要的库，包括Bootstrap Table、...
vue2.0的contextmenu右键弹出菜单的实例代码
08-29
ContextMenu 是一个常见的交互方式，用户可以右键点击某个元素，弹出一个菜单，进行相应的操作。在 Vue 2.0 中，我们可以使用 ContextMenu 来实现右键弹出菜单的功能。 首先，让我们来看一个基本的示例代码： ```...
3种不同的ContextMenu右键菜单实现代码
09-01
在网页设计中，右键菜单（ContextMenu）是一个常见的交互元素，它允许用户通过鼠标右键点击来触发特定的功能或操作。在本文中，我们将探讨三种不同的实现ContextMenu右键菜单的方法，这些方法对于增强用户界面的交互...
取消鼠标右键默认事件contextmenu
Jour的博客
04-01 2434
想要web页面充分展示自身特色，修改浏览器默认的右键事件必不可少。右键单击网页，总是弹出另存为、审查元素、查看网页源代码等等之类的菜单。就我看来这是挺影响体验的。像右键这么重要的位置，必须充分利用。调整页面链接之类等等的需求都是可以的。如何实现这个需求？利用浏览器contextmenu事件。支持contextmenu事件的浏览器有IE、Firefox、Safari、Chrome和Opera11+。下
三种菜单控件的兼容性问题处理集锦
aqi00的博客
04-24 1607
选项菜单OptionsMenu的兼容问题如果开发者用的是2.*及以上版本的Android Studio，那么极有可能发现openOptionsMenu方法无法调出菜单列表，不是SDK版本不够新，恰恰相反，正是因为SDK版本太新了。我们在Android Studio里面创建一个新的Activity代码，默认都是继承AppCompatActivity，而且build.gradle中也指定了appcom
表单禁用复制、粘贴、及右击菜单(contextmenu、oncopy、oncut、onpaste、onselectstart)...
weixin_30802171的博客
09-02 228
禁用右键菜单，可以使用oncontextmenu属性： <textarea oncontextmenu="return false"></textarea> 兼容性：http://www.quirksmode.org/dom/events/contextmenu.html 禁用复制，使用oncopy和oncut： <textarea oncopy=...
SWTBot右键菜单
hubinliweiwei的专栏
12-30 265
在用SWTBot获取元素右键菜单的时候，往往因为时间问题、或者是SWTBot的限制问题，抛出菜单获取不到、或者XXX dispose等问题。 [code="java"]public static void clickContextMenu(final AbstractSWTBot bot, final String... texts) { // show final ...
handsontable如何重写右键菜单(contextmenu)
热门推荐
DMS程序猿
11-18 1万+
在使用handsontable的过程中，想必大家一定有右键菜单的需求吧，那么如何使用handsontable的右键菜单功能呢？ 1，使用handsontable默认的右键菜单 contextMenu: true没错，就这么一个简单的参数就可以了，效果上图： 参照官方文档那个地址：http://docs.handsontable.com/0.16.1/demo-context-me
jQuery右键菜单ContextMenu使用笔记
aoyuan4706的博客
02-02 104
插件下载地址：http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js和http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 以下几个博文讲解的很详细了：http://www.bl...
OptionMenu 和 ContextMenu （系统菜单栏——上下文菜单栏）
fingerth的博客
12-08 891
1.OptionMenu  (系统菜单栏) （1）菜单栏显示： @Override public boolean onCreateOptionsMenu(Menu menu) { //泵菜单内容 getMenuInflater().inflate(R.menu.main, menu); return true; } （2）menu里面的属性： 是一个菜单栏 菜单栏里面一个栏
html中为一张图片设置一个右键菜单设置
最新发布
06-10
要为一张图片设置一个右键菜单，您需要使用HTML中的`contextmenu`属性和CSS来定义菜单的样式。下面是设置图片右键菜单的示例代码： HTML代码： ```html <img src="image.png" contextmenu="myMenu"> ``` 在这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值