右键菜单
思路
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 的相关知识
来源: https://www.cnblogs.com/iDouble/p/8540384.html