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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
PHP 编程的 5个良好习惯
2009/02/20 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python中文编码那些事
2014/06/25 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python爬虫之遍历单个域名
2019/11/20 Python
Python map及filter函数使用方法解析
2020/08/06 Python
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
迎七一演讲稿
2014/09/12 职场文书
心得体会格式及范文
2016/01/25 职场文书