自定义contextmenu(菜单右键)

contextmenu(菜单右键)自定义
自定义contextmenu(菜单右键)_第1张图片
自定义contextmenu(菜单右键)_第2张图片
自定义contextmenu(菜单右键)_第3张图片


<html>

    <head>
        <meta charset="UTF-8">
        <title>自定义菜单右键title>
    head>
    <body>
        <ul class="menu" id="menu">
            <li><a href="javaScript:;">复制a>li>
            <li><a href="javaScript:;">粘贴a>li>
            <li><a href="javaScript:;">剪切a>li>
            <li><a href="javaScript:;">刷新a>li>
        ul>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .menu {
                width: 100px;
                border: 1px solid #ccc;
                position: absolute;
                box-shadow: 0 0 5px rgba(0,0,0,.2);
                padding: 10px 0;
                transition: all .1s ease;       
            }
            .menu li {
                list-style: none;
                width: 100%;
            }
            .menu li a {
                display: inline-block;
                text-decoration: none;
                color: #555;
                width: 100%;
                padding: 10px 0;
                text-align: center;
            }
            .menu li:first-of-type{
                border-radius: 5px 5px 0 0;
            }
            .menu li a:hover,
            .menu li a:active {
                background: #eee;
                color: #0AAF88;
            }
        style>
        <script>
            window.onload = function() {
                 //获取可视区宽度
                var winWidth = function() {
                    return document.documentElement.clientWidth || document.body.clientWidth;
                }
                 //获取可视区高度
                var winHeight = function() {
                    return document.documentElement.clientHeight || document.body.clientHeight;
                }
                var menu = document.getElementById('menu');
                menu.style.display = 'none';
                document.addEventListener('click', function() {
                    menu.style.display = 'none';
                })
                menu.addEventListener('click', function(event) {
                    var event = event || window.event;
                    event.cancelBubble = true;
                })
               //右键菜单
                document.oncontextmenu = function(event) {
                    var event = event || window.event;
                    menu.style.display = 'block';
                    var l, t;
                    l = event.clientX;
                    t = event.clientY;
                    if( l >= (winWidth() - menu.offsetWidth) ) {
                        l  = winWidth() - menu.offsetWidth;
                    } else {
                        l = l
                    }
                    if(t > winHeight() - menu.offsetHeight  ) {
                        t = winHeight() - menu.offsetHeight;
                    } else {
                        t = t;
                    }                   
                    menu.style.left = l + 'px';
                    menu.style.top = t + 'px';
                    return false;
                }
            }
        script>
    body>

html>

原文代码链接:https://www.jianshu.com/p/bf398e8dee2d

你可能感兴趣的:(summary)