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


Posted in Javascript onMay 31, 2017

RT,一个简单的例子,仅仅讲述原理

 

<div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>

假设我要把上面这个div设置为右键菜单,先随意美化一下。

原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY,

我们可以利用这两个属性,来控制div的水平,垂直偏移量,并且返回false,取消事件的默认行为,来模拟浏览器的右键菜单。

document.oncontextmenu=function(e){

var x=e.clientX+'px';


var y=e.clientY+'px';


var node=document.querySelector('#menu');


node.style.left=x;


node.style.top=y;


node.style.width=100+'px';


node.style.height=100+'px';


return false; //很重要,不能让浏览器显示自己的右键菜单

}

现在是关闭部分,关闭右键菜单的方式,通常是在空白区域点击左键。

document.onclick=function(e){

if(e.target.id!='menu')


{



var node=document.querySelector('#menu');



node.style.width=0;



node.style.height=0;


}
}

这仅仅是一个基本的思路的,核心就是contextmenu事件。你可以在此基础上使用CSS随意美化升级,加入类似于transition等属性,来实现动画效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
js实现省市级联效果分享
Aug 10 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 #Javascript
基于react框架使用的一些细节要点的思考
May 31 #Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 #Javascript
使用原生js写ajax实例(推荐)
May 31 #Javascript
Javascript创建类和对象详解
May 31 #Javascript
Javascript继承机制详解
May 30 #Javascript
Vue2.x中的Render函数详解
May 30 #Javascript
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
一端时间轮换的广告
2006/06/26 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python3字符串学习教程
2015/08/20 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
python可视化实现代码
2019/01/15 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2014年基建工作总结
2014/12/12 职场文书
整脏治乱工作简报
2015/07/21 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python