SOURCE

console 命令行工具 X clear

                    
>
console
document.oncontextmenu = function (e) {
    //禁用右键菜单
    e.preventDefault()
}
// 使用id和class获取dom方法的不同
// var aa= document.getElementById('divcss').getAttribute('data-toggle')
var ele = document.getElementsByClassName('divcss')[0];
var fun_a = ele.getAttribute('data-toggle');
ele.onmousedown = function (e) {
    if (e.button == 1) {
        var sss = document.getElementsByClassName('ss')[0];
        if (sss) {
            ele.removeChild(sss)
        }
        var divd = document.createElement('div');
        divd.style.height = 20 + 'px';
        divd.style.width = 50 + 'px';
        divd.style.background = '#ff0';
        divd.style.position = 'absolute';
        divd.style.top = e.y + 'px';
        divd.style.left = e.x + 'px';
        divd.className = 'ss';
        ele.appendChild(divd)
    }
    if(e.button==2){
        var mun=document.getElementById('pos');
        mun.style.display='block';
        mun.style.top=e.y+'px';
        mun.style.left=e.x+'px'
    }else{
        var mun=document.getElementById('pos');
        mun.style.display='none'
    }
};
var height, width;
/**
 * 监控页面变化
 */
window.onresize = function () {
    height = ele.scrollHeight;
    width = ele.scrollWidth;
    //设置宽和高的比例,常用比例 4:3 16:9
    var setH = (3 * width) / 4;
    document.getElementById('divcss').style.height = setH + 'px'
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>右键菜单</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id='divcss' class="divcss"></div>
<div id="pos">
    <button>编辑</button>
    <button>删除</button>
</div>
</body>
<script src="js/app.js"></script>
</html>
.divcss {
    height: 100px;
    width: 80%;
    background: #c8c8c8;
}

@media (max-width: 600px) {
    .divcss {
        background: red;
    }
}

@media (max-width: 400px) {
    .divcss {
        background: #4cae4c;
    }
}

#pos {
    display: none;
    position: absolute;
    width: 80px;
    background: #8a6d3b;
    box-sizing: border-box;
    padding: 10px;
}

#pos button {
    box-sizing: border-box;
    width: 60px;
    margin: 4px 0;
}