<style>
.zz {
width: 100px;
height: 300px;
background-color: red;
position: absolute;
}
</style>
``
```javascript
<script>
document.oncontextmenu = function (e) {
//阻止右击事件
e.preventDefault()
//清空之前点击出现的盒子
let menu = document.querySelector('.zz')
if (menu) menu.remove()
//创建一个盒子
let div = document.createElement('div')
div.classList.add('zz')
div.style.left = e.pageX + 'px'
div.style.top = e.pageY + 'px'
document.body.appendChild(div)
}
//点击除了盒子之外的部分 盒子消失
window.onclick = function (e) {
//拿到上面的盒子
let menu = document.querySelector('.zz')
//这里 可以调用自身存在的traget来判断
if (menu && !menu.contains(e.target)){
menu.remove()
}
}
</script>
js-自定义鼠标右击事件
最新推荐文章于 2023-05-11 16:04:12 发布