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 相关文章推荐
js获取网页高度(详细整理)
Dec 28 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
jquery实现页面加载效果
Feb 21 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP查询分页的实现代码
2017/06/09 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
浅谈MySQL中的触发器
2015/05/05 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Django之模板层的实现代码
2019/09/09 Python
python如何导入依赖包
2020/07/13 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
毕业生学校推荐信范文
2014/05/21 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
中班教师个人总结
2015/02/05 职场文书
转变工作作风心得体会
2016/01/23 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书