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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
微信小程序 开发之全局配置
May 05 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
Javascript实现打鼓效果
Jan 29 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
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
PHP静态类
2006/11/25 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
php使用百度天气接口示例
2014/04/22 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
python对象及面向对象技术详解
2016/07/19 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
解读python如何实现决策树算法
2018/10/11 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
wxPython多个窗口的基本结构
2019/11/19 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python reques接口测试框架实现代码
2020/07/28 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
幼儿园教研活动总结
2014/04/30 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python