在博客园博文中添加自定义右键菜单的方法详解在博客园博文中添加自定义右键菜单的方法详解
页面设计页面设计
首先将这三个功能以一个列表<ul>的形式放置。鼠标移入时样式改变,移出时还原
<style>
body{margin: 0;}
ul{
margin: 0;
padding: 0;
list-style: none;
}
.list{
width: 100px;
text-align: center;
cursor: pointer;
font:20px/40px '宋体';
background-color: #eee;
}
.in:hover{
background-color: lightblue;
color: white;
font-weight:bold;
}
</style>
<ul id="list" class="list">
<li class="in">顶部</li>
<li class="in">点赞</li>
<li class="in">评论</li>
</ul>
菜单逻辑菜单逻辑
菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分
默认行为默认行为
通常,点击右键时,会弹出浏览器的默认右侧菜单
通过return false可以实现阻止默认行为的效果,当然也可以使用preventDefault()和returnValue,详细信息移步至此
document.oncontextmenu = function(){
return false;
}
显隐显隐
右键菜单默认隐藏,点击右键时显示,点击左键时再隐藏
关于元素显隐,个人总结过共9种思路,本文就用最简单的display属性
<div id="test" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
document.onclick = function(){
test.style.display = 'none';
}
document.oncontextmenu = function(){
test.style.display = 'block';
return false;
}
</script>
位置判断位置判断
鼠标对象共有6对坐标位置信息,若把右键菜单设置为fixed固定定位,则选择clientX/Y即可
一般地,右键菜单的左上角位置应该是当前鼠标的坐标处
但是,还有另外2种情况需要考虑
【1】如果鼠标的位置到视口底部的位置小于菜单的高度,则鼠标的位置为菜单的底部位置
【2】如果鼠标的位置到视口右侧的位置小于菜单的宽度,则视口的右侧为菜单的右侧