js实现右键自定义菜单

本文实例为大家分享了右键自定义菜单的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #menu {
 height: 200px;
 width: 50px;
 border: 1px solid gray;
 background-color: antiquewhite;
 padding: 10px;
 display: none;
 position: absolute;
 }

 ul,
 li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 line-height: 40px;
 }
 </style>
 </head>

 <body>
 <div id="menu">
 <ul>
 <li>复制</li>
 <li>粘贴</li>
 <li>运行</li>
 <li>工具</li>
 <li>帮助</li>
 </ul>
 </div>
 </body>
 <script type="text/javascript">
 var menu = document.getElementById("menu");
 document.oncontextmenu = function(ev) {
 var oEvent = ev || event;
 //自定义的菜单显示
 menu.style.display = "block";
 //让自定义菜单随鼠标的箭头位置移动
 menu.style.left = oEvent.clientX + "px";
 menu.style.top = oEvent.clientY + "px";
 //return false阻止系统自带的菜单，
 //return false必须写在最后，否则自定义的右键菜单也不会出现
 return false;

 }
 //实现点击document，自定义菜单消失
 document.onclick = function() {

 menu.style.display = "none";
 }
 </script>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现的自定义右键菜单实例二则

    JS实现的自定义右键菜单实例二则

    本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&

  • Js实现自定义右键行为

    自定义右键行为(通过事件对象获得鼠标的坐标(x,y)) <!doctype html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> html{ height:100%; } body{ height:100%; } #mydiv{ width:300px; heigh

  • JavaScript 对任意元素,自定义右键菜单的实现方法

    JavaScript 对任意元素,自定义右键菜单的实现方法

    一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false;  标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对

  • js自定义鼠标右键的实现原理及源码

    今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理: 1.屏蔽右键默认事件:(一度我以为修改的就是默认事件) 2.对一个ul的隐藏:(这个我也曾迂腐的认为值得这样操作的都是div,汗) 3.对鼠标点击右键做出的响应,显示隐藏的ul: 4.鼠标重新点击后,ul重新被隐藏 这样来看的话,我们需要做的事情是不是就简单了很多,先上代码: html部分 <ul id="testRight" style="width: 100px;background-color: ye

  • JS简单实现自定义右键菜单实例

    RT,一个简单的例子,仅仅讲述原理 复制代码 代码如下: <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu> 假设我要把上面这个div设置为右键菜单,先随意美化一下. 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我

  • javascript鼠标右键菜单自定义效果

    javascript鼠标右键菜单自定义效果

    本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-

  • javascript自定义右键弹出菜单实现方法

    本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum

  • js实现完全自定义可带多级目录的网页鼠标右键菜单方法

    本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法.分享给大家供大家参考.具体分析如下: 这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

  • js实现右键自定义菜单

    本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #menu { height: 200px; width: 50px; border: 1px solid gray; back

  • 使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)

    使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)

    前言 微信的接口调试工具可以编辑自定义菜单,不过是提交json格式数据创建菜单,非常的不方便还容易出错.网上的工具不好用,所以就自己写了一个. 正文 先用bootstrap排个页面框架出来,调用自定义菜单接口需要用到AccessToken,放个输入框输入AccessToken.也不排除想直接输入AppId和AppSecret来获取AccessToken的用户,所以还需要下拉菜单来选择是输入AccessToken还是直接获取AccessToken.为了兼顾微信企业号应用创建菜单还需要AgentId

  • 详解nodejs微信公众号开发——6.自定义菜单

    上一篇文章:nodejs微信公众号开发--5.素材管理接口,我们实现了新增临时素材.管理永久素材的接口,这些接口的实现,使我们能够推送多样的消息给用户.本节介绍的内容是关于自定义菜单 1. 自定义菜单的介绍 自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的功能.关于自定义菜单需要掌握以下几点内容: 自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单. 一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以"..."代替. 创建自定义菜单后,由于微信客

  • js实现右键弹出自定义菜单

    近期在项目中有一个右键菜单的需求,发现很多实现都比较复杂,于是自己花了一点时间稍微研究了一下,下面提供一个简洁的实现方法. js声明部分: //创建右键菜单 var epMenu={ create:function(point,option){ var menuNode=document.getElementById('epMenu'); if(!menuNode){ //没有菜单节点的时候创建一个 menuNode=document.createElement("div"); men

  • Qt股票组件之自选股列表拖拽、右键常用菜单功能的实现

    一.开头嘴一嘴 本文带领大家来看看自选股列表的实现. 如果有需要的朋友可以加我好友,有偿提供源码.或者也可以进一步提供功能定制 封装的控件,或者demo都是没有样式的,所以看着会比较丑一些,不过加样式也是分分钟...这里咱可以先看功能,需要即可定制 本篇文章的自选股和大多数炒股软件一样,每一条自选都是支持拖拽的,拖拽时鼠标会跟随一个拖拽映像,并且鼠标移动时,会有拖拽提示,告知我们鼠标释放时拖拽项将会被插入到哪个位置.除过拖拽之外,自选股列表还支持右键菜单,都是一样常用的操作. 右键菜单包括置顶.

  • 微信小程序自定义菜单切换栏tabbar组件代码实例

    微信小程序自定义菜单切换栏tabbar组件代码实例

    这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabInde

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

  • 微信小程序自定义菜单导航实现楼梯效果

    微信小程序自定义菜单导航实现楼梯效果

    设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant UI框架也为我们实现了这一效果. 微信小程序该如何实现?? 效果展示 当菜单导航滚动到页面顶部时,菜单吸顶 当点击菜单按钮时,切换到对应区域(过渡到该区域,有动画效果) 当内容区滚动到某类区域时,对应区域的菜单按钮高亮 设计思路 1.吸顶效果的实现 获取菜单导航距离页面顶部距离wx.createSel

随机推荐