html鼠标自定义右键菜单：css+js实现自定义html右键菜单

站长手记作者： 2024-08-28 15:25:02

我们在网页中很多都有右键菜单的功能，一般点击右键显示的是浏览器默认的菜单选项，那么我们直接如何通过css+js实现html的右键菜单呢？这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。

实现原理

实现代码

<style>
html,body{
    width : 100%;height : 100%; margin: 0;padding: 0;
}
#menu{
    width : 100px;
    padding: 10px;
    border : 1px solid #ddd;
    visibility : hidden;
    position : absolute;
}
</style>

<body id="container">
	<div id="menu">
	    <a href="javascript:history.back();">后退</a>
	    <hr/>
	    <a href="javascript:history.back();">前进</a>
	</div>
</body>

<script>      
window.oncontextmenu=function(e){  e.preventDefault();//取消默认的浏览器自带右键  var evt = window.event || arguments[0];  var menu=document.getElementById('menu');//获取右键菜单  var container = document.getElementById('container');//获取区域  /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
    var rightedge =container.clientWidth-evt.clientX;
    var bottomedge =container.clientHeight-evt.clientY;
    console.log(container.clientHeight);
    /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
    if (rightedge < menu.offsetWidth){             
        menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";            
    }else{ /*否则，就定位菜单的左坐标为当前鼠标位置*/
        menu.style.left = container.scrollLeft + evt.clientX + "px";
    }
    /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
    if(bottomedge < menu.offsetHeight){
        menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
    }else{/*否则，就定位菜单的上坐标为当前鼠标位置*/ 
        menu.style.top = container.scrollTop + evt.clientY + "px";
    }
    /*设置菜单可见*/
    menu.style.visibility = "visible";     
}

window.onclick=function(e){//关闭右键菜单
 	document.getElementById('menu').style.visibility = 'hidden'; //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
</script>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_70191.html