自定义右键菜单


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <style>
        *{margin:0;padding:0;}
        ul, li{list-style:none;}
        li{margin: 5px 10px;}
        #context-menu{width:150px;height:200px;border:1px solid black;
            background:lightblue;display:none;position:absolute;top:0;left:0;}
    style>
    <body>
        自定义右键菜单
        <div id="context-menu">
            <ul>
                <li><a href="#">功能1-1a>li>
                <li><a href="#">功能1-2a>li>
                <li><a href="#">功能1-3a>li>
                <li><hr />li>
                <li><a href="#">功能2-1a>li>
                <li><a href="#">功能2-2a>li>
            ul>
        div>
    body>
    <script>
        var oContextMenu = document.getElementById('context-menu');
        // 0. 重置contextmenu
        document.oncontextmenu = function(e){
            // 1. 获取鼠标出现的坐标
            e = e || event;
            // 2. 修改自定义菜单的left和top
            oContextMenu.style.left = e.clientX + 'px';
            oContextMenu.style.top = e.clientY + 'px';
            // 3. 让自定义菜单的diplay改变为block
            oContextMenu.style.display = 'block';
            // 4. 禁止默认打开右键菜单
            return false;
        }

        // 关闭自定义的菜单,无论点击浏览器的那个地方菜单都需要关闭,事件绑定在document上
        document.onclick = function(){
            oContextMenu.style.display = 'none';            
        }

    script>
html>

你可能感兴趣的:(javascript)