1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 textarea{ width: 200px;height: 100px;}
8 #menu{width: 50px;background: red; position: absolute; display: none;}
9 </style>
10 </head>
11 <body>
12 <textarea id="text"></textarea>
13 <ul id="menu">
14 <li>菜单1</li>
15 <li>菜单2</li>
16 <li>菜单3</li>
17 </ul>
18 </body>
19 </html>
<script>
//跨浏览器添加事件
function addEvent(obj,type,fn){
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);
}else if (obj.attachEvent) {
obj.attachEvent(‘on‘+ type,fn);
}
}
//清楚默认行为兼容
function preDef (evt) {
var e = evt || window.event;
if (e.preventDefault) {
e.preventDefault();
}else{
e.returnValue = false;
}
}
addEvent(window,‘load‘,function(){
var text = document.getElementById(‘text‘);
addEvent(text,‘contextmenu‘,function(evt){
preDef(evt); //取消菜单默认行为
var menu = document.getElementById(‘menu‘);
var e = evt || window.event;
menu.style.left = e.clientX + "px"; //获取鼠标坐标，定位菜单跟着鼠标走
menu.style.top = e.clientY + "px";
menu.style.display = ‘block‘;
addEvent(document,‘click‘,function(){ //鼠标左击隐藏菜单
menu.style.display = ‘none‘;
});
});
});
</script>
时间： 2024-10-13 16:21:44