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的相关知识。

posted @ 2018-03-10 16:08  决起而飞  阅读(1010)  评论(0编辑  收藏  举报