console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .area {
                width: 300px;
                height: 300px;
                background-color: yellow;
            }
            .rg_menu {
                position: absolute;
                border : 1px solid #ddd;
                cursor: pointer;
            }
            #red, #yellow, #blue {
                padding: 10px;
            }
            #red:hover, #yellow:hover, #blue:hover {
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <section id="menu"></section>

       
        <script >
            var menu = {
                init(param) {
                    const el = param.el;
                    if(!el) return;
                    this.createElement(el);
                    this.initEvent();
                },
                createElement(el, src) {
                    const area = document.createElement('div');
                    area.className = 'area';
                    el.appendChild(area);
                },
                createMenuElement() {
                    const area = document.getElementsByClassName("area")[0];

                    const rg_menu = document.createElement('div');
                    rg_menu.className = 'rg_menu';
                    const rg_menu_item1 = document.createElement('div');
                    rg_menu_item1.innerText = "红色";
                    rg_menu_item1.id = 'red';
                    const rg_menu_item2 = document.createElement('div');
                    rg_menu_item2.innerText = "蓝色";
                    rg_menu_item2.id = 'blue';
                    const rg_menu_item3 = document.createElement('div');
                    rg_menu_item3.innerText = "黄色";
                    rg_menu_item3.id = 'yellow';

                    rg_menu.appendChild(rg_menu_item1);
                    rg_menu.appendChild(rg_menu_item2);
                    rg_menu.appendChild(rg_menu_item3);

                    let x = event.pageX;
                    let y = event.pageY;
                    rg_menu.style.marginLeft = x+"px";
                    rg_menu.style.marginTop = y+"px";
                    rg_menu.style.visibility = "visible";
                    
                    area.appendChild(rg_menu);
                },
                initEvent() {
                    const _this = this;
                    const area = document.getElementsByClassName("area")[0];
                    
                    area.onclick = function(event) {
                        // TODO：单击非自定义右键菜单区域将菜单隐藏
                        let preview = document.getElementsByClassName('rg_menu');
                        let rg_menu = preview[preview.length - 1];
                        let x = +event.pageX;
                        let y = +event.pageY;
                        let width = +rg_menu.offsetWidth;
                        let height = +rg_menu.offsetHeight;
                        let left = +rg_menu.offsetLeft;
                        let top = +rg_menu.offsetTop;
                        if (!(x >= left && x <= left + width && y >= top && y <= top + height)) {
                            rg_menu.style.visibility = "hidden";
                        }
                    }
                    
                    area.oncontextmenu = function(event) {
                        // TODO：禁止鼠标右键默认菜单
                        event.preventDefault();
                        _this.createMenuElement();
                        _this.initMenuEvent();
                    }
                },
                initMenuEvent() {
                    const area = document.getElementsByClassName("area")[0];
                    // TODO：单击菜单选项，将 aera 背景色填充为对应颜色
                    let preview = document.getElementsByClassName('rg_menu');
                    let rg_menu = preview[preview.length - 1];
                    rg_menu.onclick = function(event) {
                        area.style.backgroundColor = event.target.id;
                        rg_menu.style.visibility = "hidden";
                    }
                }
            }
            menu.init({
                // TODO: 请获取id=menu的节点
                el: document.getElementById("menu"),
            })
        </script>

        
    </body>
</html>