javascript右键菜单分析

时间：2022-12-23 12:29:10

右键菜单

思路

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

相关文章