在博客园博文中添加自定义右键菜单的方法详解
页面设计
首先将这三个功能以一个列表
- 的形式放置。鼠标移入时样式改变,移出时还原
顶部 点赞 评论
菜单逻辑
菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分
默认行为
通常,点击右键时,会弹出浏览器的默认右侧菜单
通过returnfalse可以实现阻止默认行为的效果,当然也可以使用preventDefault()和returnValue,详细信息移步至此
document.oncontextmenu=function(){ returnfalse; }
显隐
右键菜单默认隐藏,点击右键时显示,点击左键时再隐藏
关于元素显隐,个人总结过共9种思路,本文就用最简单的display属性
位置判断
鼠标对象共有6对坐标位置信息,若把右键菜单设置为fixed固定定位,则选择clientX/Y即可
一般地,右键菜单的左上角位置应该是当前鼠标的坐标处
但是,还有另外2种情况需要考虑
【1】如果鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置
【2】如果鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧
元素的尺寸信息共有偏移尺寸offset、可视区尺寸client和滚动尺寸scroll,此时菜单的宽高应该为偏移尺寸offsetWidth/offsetHeight(全尺寸包含width、padding、border)
功能实现
共用有回到顶部、点赞和评论三个功能需要实现
回到顶部
回到顶部共有5种实现方法,下面使用可读写的scrollTop属性进行效果实现
回到顶部