自定义菜单绑定

本文介绍了一种使用HTML、CSS和JavaScript实现自定义上下文菜单的方法。通过监听文本区域的右键点击事件,并利用绝对定位展示菜单,可以有效增强用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 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> 

 

转载于:https://www.cnblogs.com/zz334396884/p/7543632.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值