您的位置：首页 > Web前端 > JavaScript

javascript自定义右键菜单并屏蔽默认右键菜单【原创】

2017-05-02 23:06 405 查看
原理很简单，就是右击鼠标（oncontextmenu事件）return false阻止默认右键菜单，之后显示自定义的右键菜单，菜单显示位置由事件源的clientX和clientY计算得出。



[html] view
plain copy

 print?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<title>拖拽+自定义右键菜单</title>  

<style type="text/css">  

body{ margin:0; padding:0}  

#ul1{ width:130px; height:120px; padding:10px 3px; background:#fff; border:#ACA899 1px solid; display:none; position:absolute; left:0;top:0;}  

#ul1 li{ width:130px; height:28px; line-height:28px; font-size:14px; border-bottom:#ACA899 1px dashed; text-align:center; list-style:none}  

#ul1 li:hover{ background:#316AC5}  

</style>  

<script type="text/javascript">  

window.onload=function()  

{  

var ul=document.getElementById("ul1")  

document.oncontextmenu=function(ev)  

{  

var ev=ev||window.event  

var l=ev.clientX  

var t=ev.clientY  

ul.style.display="block"  

ul.style.left=l+'px'  

ul.style.top=t-16+'px'  

return false;  

}  

document.onclick=function()  

{  

ul.style.display="none"  

}  

}  

</script>  

</head>  

  

<body>  

<ul id="ul1">  

<li>自定义右键菜单</li>  

<li>自定义右键菜单</li>  

<li>自定义右键菜单</li>  

<li>自定义右键菜单</li>  

</ul>  

</body>  

</html>  
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航