js自定義鼠標右鍵菜單


我們在瀏覽器上點擊右鍵會出現一些經常見的菜單,下面我將介紹如何自定義自己的菜單。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson5/06.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>自定義右鍵菜單</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:12px/24px arial;}
#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;}
#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}
#menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;}
#menu li.active{background:#999;}
#menu li.active a{color:#fff;background:#8f8f8f;}
#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(img/ico.png) no-repeat;}
#menu li em.cur{background-position:0 0;}
#menu li em.copy{background-position:0 -24px;}
#menu li em.paste{background-position:0 -48px;}
</style>
<script type="text/javascript">
window.onload = function(){
var ul = document.getElementById("menu"); //獲取ul節點對象
/*為document綁定鼠標右鍵菜單事件*/
document.oncontextmenu = function(e){
var _event = window.event||e; //事件對象
var x = _event.clientX; // 鼠標的x坐標
var y = _event.clientY; //鼠標的y坐標

ul.style.left = x + "px"; //改變ul的坐標
ul.style.top = y + "px";
//阻止默認行為
if(_event.preventDefault){
_event.preventDefault(); //標准格式
}else{
_event.returnValue = false; //IE格式
}
}
}
</script>
</head>
<body>
<center>自定義右鍵菜單,請在頁面點擊右鍵查看效果。</center>
<ul id="menu" style="display: block; top: 54px; left: 645px;">
<li class=""><em class="cut"></em><a href="javascript:;">剪切</a></li>
<li class=""><em class="copy"></em><a href="javascript:;">復制</a></li>
<li class=""><em class="paste"></em><a href="javascript:;">粘貼</a></li>
</ul>


</body></html>
最重要的是要取消瀏覽器默認行為,注意兼容問題。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com