javascript右键菜单分析
右键菜单
思路
1、遮蔽原来的默认右键菜单
2、新建右键菜单跟随鼠标移动
3、注意边界处的位置变化
4、自定义右键内容的具体效果
具体
这样的事件涉及到有关contextmenu事件,阻止默认事件,获取鼠标点击位置,涉及到offsetWidth等等,具体展示
offsetWidth:元素在水平方向占据的空间,只包括width padding border
offsetHeight:元素在垂直方向占据的空间,只包括height padding border
offsetTop:偏移量,相对于已定位元素的后代元素,返回的是相对于祖先元素,否则返回相对文档元素,返回的是top距离
offsetLeft:偏移量,相对于已定位元素的后代元素,返回的是相对于祖先元素,否则返回相对文档元素,返回的是left距离
clientX:可视区的坐标,为横坐标;当然也是event.clientX
clientY:可视区的坐标,为纵坐标,同理event.clientY
clientWidth:只包含width padding
clientHeight:只包含height padding
对于获取整个的页面的可以 document.documentElement.clientWidth||document.body.clientWidth ,不包含滚动条
scrollTop:滚动的距离,包含边框
scrollLeft::滚动的距离,包含边框
对于获取scrollTop可以 document.documentElement.scrollTop||document.body.scrollTop
scrollWidth:没有滚动条下,页面的总宽度
scrollHeight:没有滚动条下,页面的总高度,对于这两个属性,不同浏览器有所差异,必须兼容性,js高程上有的。
pageX/Y:整个页面的坐标,不是clientX/Y可视区的坐标
screenX/Y:参照点是整个屏幕的左上角,不限于浏览器
//右键菜单重置
document.oncontextmenu=function(event){
var event=event||window.event
event.preventDefault() //阻止默认事件
event.returnValue=false
var clientWidth=document.documentElement.clientWidth
var clientHeight=document.documentElement.clientHeight
move.style.display='block'
//基于当前可视区的
if(clientHeight-event.pageY>=move.offsetHeight){
move.style.top=event.pageY+'px'
}else{
move.style.top=(event.pageY-move.offsetHeight)+'px'
}
if(clientWidth-event.pageX>=move.offsetWidth){
move.style.left=event.pageX+'px'
}else{
move.style.left=(event.pageX-move.offsetWidth)+'px'
}
}
这是主要的代码,阻止默认事件,限定所要展示的菜单的位置
当然,对于里面所要跳转的页面,只需添加即可,比如:
<li><a href="javascript:history.go(1)">返回</a></li>
<li><a href="javascript:history.go(-1)">前进</a></li>
<li><a href="javascript:location.reload()">重新加载</a></li>
返回和前进,重新加载,用到BOM的相关知识。
javascript右键菜单分析的更多相关文章
- js实现自定义右键菜单--兼容IE、Firefox、Chrome
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- JavaScript模拟鼠标右键菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript自定义右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript自定义浏览器右键菜单
javascript自定义浏览器右键菜单 在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...
- ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础,单线程,跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js:使用 JavaScript 生成
ASP.NET Boilerplate 学习 1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...
- JavaScript实现自定义右键菜单
JavaScript实现自定义右键菜单,思路如下: 1. 屏蔽默认右键事件: 2. 隐藏自定义的菜单模块(如div.ul等): 3. 右键点击特定或非特定区域,显示菜单模块: 4. 再次点击,隐藏菜单 ...
- JavaScript 中禁止用户右键菜单,复制,选取,Ctrl,Alt,Shift. 获取宽高,清除浮动
//禁用右键菜单 document.oncontextmenu = function(){ event.returnValue = false; } //禁用选取内容 document.onselec ...
- JavaScript 自定义html元素鼠标右键菜单
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
- 打造html右键菜单
今天是给大家介绍一款在网页上使用的右键菜单,原作者的网址是:http://51jsr.javaeye.com/blog/305517 这个右键菜单已经非常优秀,不过呢.却是IE Only,而且在DTD ...
随机推荐
- 浅析Xilinx 三速以太网MAC IP核
之前在使用Altera的三速以太网MAC IP的基础上,完成了UDP协议数据传输.此次为了将设计移植到xilinx FPGA上,需要用到xilinx的三速以太网MAC IP核,当然也可以自己用HDL编 ...
- 一、爬虫的基本体系和urllib的基本使用
爬虫 网络是一爬虫种自动获取网页内容的程序,是搜索引擎的重要组成部分.网络爬虫为搜索引擎从万维网下载网页.一般分为传统爬虫和聚焦爬虫. 爬虫的分类 传统爬虫从一个或若干初始网页的URL开始,获得初始网 ...
- 【linux之用户,密码,组管理】
一.用户及密码 用户账户 超级用户:UID=0 root 普通用户:UID!=0 系统用户: 0<UID<500 为了维持系统的某些功能或者实现某些服务 不能完成登录时候的身份验证 普通用 ...
- mongodb window安装配置
下载mongodb安装包 1. https://www.mongodb.org/dl/win32/x86_64-2008plus-ssl?_ga=2.233271640.711265466.15193 ...
- windows 下编译 OpenSSL1.0.2l 版
1.需要的软件工具: microsoft visual studio2013(或2010以后其他版本) Perl 软件, 版本为strawberry - perl - 5.26.0.1 - 64bit ...
- Java反射获取字节码以及判断类型
一.获取类的字节码的三种方法: 1.使用Class.class Class<?> c1=String.class; 2.使用实例.getClass() String s= Clas ...
- iOS微信内存监控
WeTest 导读 目前iOS主流的内存监控工具是Instruments的Allocations,但只能用于开发阶段.本文介绍如何实现离线化的内存监控工具,用于App上线后发现内存问题. FOOM(F ...
- Java.lang.Comparable接口和Java.util.Comparator接口的区别
Java的Comparator和Comparable当需要排序的集合或数组不是单纯的数字型时,通常可以使用Comparator或Comparable,以简单的方式实现对象排序或自定义排序. 1.Com ...
- pep 8 规范的一些记录
一.pep8起源 龟叔创立Python的初衷里就有创立一个容易阅读的编程语言,所以亲自操刀写了pep8 代码规范,每个项目开始前都要有一个共识,就是自己的代码规范,pep8 就是一个很好的范本. 二. ...
- CodeForces - 740C
这题是思维考察.由于区间个数可能会很多,暴力完全没法下手.首先要明确区间长度最小的就决定了最后的答案,因为最小区间必须要要从0开始到区间长度减1才能满足让mex最大.接下来就是考虑如何填充数组才能让所 ...