阻止右击默认事件方式:
1. 阻止页面上的默认事件:(在页面上的右击事件都将被禁止)
document.oncontextmenu = function () {
// e.preventDefault()
// 或者 都可以
return false;
}
2. 阻止元素上的默认右击事件:
<div id="app">
<div class="box"></div>
<div class="menu">
<!-- 内容 -->
</div>
</div>
<script>
const box = document.getElementsByClassName('box')[0]
box.oncontextmenu = function (e) {
e.preventDefault();
}
box.onmousedown = function (e) {
// 1 表示鼠标左键
// 2 表示鼠标右键
console.log(e.button);
}
</script>
可以看出阻止了元素上的默认右击事件;页面上的菜单还是可以显示
小案例:
如下图所示:
盒子在父容器内可拖动,可以右击显示菜单:
传入三个参数:el:表示目标元素;可拖动的元素
parentNode: 表示父级容器
menu:表示显示的菜单;
代码:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html , body{
margin: 0;
padding: 0;
}
#app {
position: relative;
margin: 100px auto;
padding: 10px;
width: 400px;
height: 400px;
border: 1px solid #333;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
.menu {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="app">
<div class="box"></div>
<div class="menu">
<!-- 内容 -->
</div>
</div>
<script src="./index.js"></script> -->
<script>
const box = document.querySelector('.box'),
app = document.querySelector('#app'),
menu = document.querySelector('.menu');
const drag = new Drag({
el: box,
parentNode: app,
menu,
})
drag.init();
</script>
</body>
</html>
index.js:
function Drag ({el, parentNode, menu}) {
if(!el) throw new Error('no element!');
this.el = el;
this.parentNode = parentNode;
this.menu = menu;
}
Drag.prototype = {
init () {
this.bindEvent();
},
bindEvent () {
this.el.addEventListener('mousedown', this.onMouseDown.bind(this), false)
document.addEventListener('click', () => this.menu.style.display = 'none')
},
// 鼠标按下
onMouseDown (e) {
this.startX = e.clientX;
this.startY = e.clientY;
// 盒子的宽高
this.elWidth = this.el.offsetWidth;
this.elHeight = this.el.offsetHeight;
this.pLeft = this.parentNode.offsetLeft;
this.pTop = this.parentNode.offsetTop;
this.pWdith = this.parentNode.offsetWidth;
this.pHeight = this.parentNode.offsetHeight;
if(e.button === 0) {
// 鼠标左键点击
this.setInitPos();
const move = (e) => {
this.onMouseMove(e);
};
// 触发移动事件
document.addEventListener('mousemove', move, false);
// 鼠标弹起
document.addEventListener('mouseup', this.onMouseUp.bind(this, move), false);
} else if (e.button === 2) {
// 清除该元素上右击默认事件
// this.preventContextMenu();
document.oncontextmenu = function (e) {
return false
}
this.menu.style.display = 'block'
this.setMenuPos();
}
},
onMouseMove (e) {
this.moveX = e.clientX;
this.moveY = e.clientY;
this.setMovePos();
// console.log(this.moveX, this.moveY);
},
// 鼠标弹起
onMouseUp (fn) {
document.removeEventListener('mousemove', fn);
},
// 初始化点击设置位置
setInitPos () {
const { el, startX, startY, pLeft, pTop, elWidth, elHeight } = this;
el.style.left = startX - pLeft - elWidth / 2 + 'px';
el.style.top = startY - pTop - (elHeight / 2) + 'px';
},
// 移动位置设置
setMovePos () {
const { el, moveX, moveY, pLeft, pTop, elWidth, elHeight,pWdith, pHeight } = this;
const elLeft = moveX - elWidth / 2,
elRight = moveX + elWidth / 2,
elTop = moveY - elHeight / 2,
elBtm = moveY + elHeight / 2;
if(elLeft <= pLeft) {
el.style.left = 0 + 'px';
} else if (elRight > pLeft + pWdith) {
el.style.left = pWdith - elWidth + 'px'
} else {
el.style.left = moveX - pLeft - elWidth / 2 + 'px'
}
if(elTop <= pTop) {
el.style.top = 0;
} else if(elBtm > pHeight + pTop){
el.style.top = pHeight - elHeight + 'px';
} else {
el.style.top = moveY - pTop - elHeight / 2 + 'px';
}
},
// 设置菜单位置
setMenuPos () {
const { menu, startX, startY, pLeft, pTop, elWidth, elHeight } = this;
menu.style.left = startX - pLeft + 'px';
menu.style.top = startY - pTop + 'px';
},
}