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 ...
随机推荐
- python学习:收集ip信息
#!/usr/bin/env python from subprocess import Popen, PIPE def getIfconfig(): p = Popen(['ifco ...
- Linux 编译安装 php 扩展包 curl
php源码目录:/root/php php编译目录:/usr/local/webserver/php/ curl源码目录:/root/curl 1.curl,主要用于发送http请求,是php的一个扩 ...
- centos7下安装vsftpd
安装步骤: 创建ftp目录 cd / mkdir ftpfile 创建指定登陆用户并不让他拥有登陆系统的权限(设置指定登陆shell) useradd ftpuser -d /ftpfile/ -s ...
- Tomcat启动出现:Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/SpringMvc]]解决办法
严重: ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component ...
- PHP中单引号与双引号的区别
在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ". 一般情况下两者是通用的.但双引号内部变量会解析,单引号则不解析. PHP允许我们在双引号串中直接包含 ...
- MySQL取得某一范围随机数
①直接取值 若要在i ≤ R ≤ j 这个范围得到一个随机整数R ,需要用到表达式 FLOOR(i + RAND() * (j – i + 1)). 例如, 若要在7 到 12 的范围(包括7和12) ...
- 微信小程序半周问题总结
新产品要做一个微信小程序,不想吐槽老板没给任何准备就给出了需求和原型图,好像默认小程序闭着眼睛就可以很顺利开发好.现在半周下来(五一结束开始到今天)完成了差不多所有的界面,网络请求部分还跟服务端兄弟耗 ...
- hdu 2047递推
A[N]表示以E或者F结尾的情况下的方案数,B[N]表示以O结尾的情况下的方案数,F[N]=3*A[N-1]+2*B[N-1] 同时,A[N]=2*B[N-1]+2*A[N-1],B[N-1]=A[N ...
- 【spring-boot】spring aop 面向切面编程初接触
众所周知,spring最核心的两个功能是aop和ioc,即面向切面,控制反转.这里我们探讨一下如何使用spring aop. 1.何为aop aop全称Aspect Oriented Programm ...
- 高并发场景下的httpClient优化使用
1.背景 我们有个业务,会调用其他部门提供的一个基于http的服务,日调用量在千万级别.使用了httpclient来完成业务.之前因为qps上不去,就看了一下业务代码,并做了一些优化,记录在这里. 先 ...