背景:一个大屏的项目,在大屏展示的时候触摸会跟随手指动,先把页面固定定位。
position: fixed;
top:0;
left:0;
并且还会有右键提示
created() {
this.$nextTick(() => {
// 1.禁用右键菜单
document.oncontextmenu = new Function("event.returnValue=false");
// 2.禁用鼠标选中
document.onselectstart = new Function("event.returnValue=false");
// 3.禁止键盘F12键
document.addEventListener("keydown", function (e) {
if (e.key == "F12") {
e.preventDefault(); // 如果按下键F12,阻止事件
}
});
});
},
页面禁止缩放:
在head标签里加上
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
鼠标滚轮事件:
document.addEventListener('DOMMouseScroll', function (event) {
event = event || window.event;
// event.detail 属性和 mousewheel 事件的 wheelDelta 属性是一个意思
if ((event.detail && event.ctrlKey)) {
event.preventDefault();
}
}, {
capture: false,
passive: false
});
禁用通过手指触摸缩放页面时需要touch(触摸)事件
document.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault()
}
},{
capture: false,
passive: false
});
document.addEventListener('touchmove', function(event) {
event.preventDefault()
},{
capture: false,
passive: false
});