console
document.oncontextmenu = function (e) {
e.preventDefault()
}
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;
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;
}