屏蔽：键盘按键、鼠标点击事件

概要内容

• 屏蔽-键盘按键
• 屏蔽-鼠标点击
• 屏蔽-BackSpace

屏蔽-键盘按键

//添加按键监听
window.addEventListener('keydown', this.onKeyDown,true);

//移除按键监听
window.removeEventListener("keydown",this.onKeyDown,true);

onKeyDown(val){
    console.log('按下' + val.key);
    val.preventDefault();
    val.stopPropagation();
    val.cancelBubble = true;
    window.event.returnValue = false;
    window.event.preventDefault();
    window.event.stopPropagation();
    window.event.cancelBubble = true;
    return false;
}

屏蔽-鼠标点击

//添加鼠标点击监听
window.addEventListener('mousedown',this.onClick,true);

//移除鼠标点击监听
window.removeEventListener('mousedown',this.onClick,true);

//which: 1-左键 2-中键 3-右键
onClick(val){
    console.error('点击' + val.which);
    return false;
}

屏蔽-BackSpace

在IE页面跳转过程中，按BackSpace退格键默认返回上此浏览页，导致路由中断引起(Vue)页面卡死，所以需要在IE中屏蔽掉BackSpce退格键，但是在输入框中则不屏蔽。

• preventBackSpce.js：

export const banBackSpace = (e) => {
  let ev = e || window.event
  // 各种浏览器下获取事件对象
  let obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget
  // 按下Backspace键
  if (ev.keyCode === 8) {
    // 标签名称
    let tagName = obj.nodeName.toLowerCase();
    // 如果标签不是input或者textarea则阻止Backspace
    if (tagName !== 'input' && tagName !== 'textarea') {
      return stopIt(ev)
    }
    let tagType = obj.type.toLowerCase() // 标签类型
    // input标签除了下面几种类型，全部阻止Backspace
    if (tagName === 'input' && (tagType !== 'text' && tagType !== 'textarea' && tagType !== 'password')) {
      return stopIt(ev)
    }
    // input或者textarea输入框如果不可编辑则阻止Backspace
    if ((tagName === 'input' || tagName === 'textarea') && (obj.readOnly === true || obj.disabled === true)) {
      return stopIt(ev)
    }
  }
}

function stopIt(ev) {
  if (ev.preventDefault) {
    // preventDefault()方法阻止元素发生默认的行为
    ev.preventDefault()
  }
  if (ev.returnValue) {
    // IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
  }
  return false
}

• 使用方法：

1. 在需要使用的Vue页面引入组件(一般在main.vue中添加)
import {banBackSpace} from "@/util/preventBackspace";

2. mounted 钩子函数挂载事件
document.onkeypress = banBackSpace;
document.onkeydown = banBackSpace;

---

以上: 如发现有问题，欢迎留言指出，我及时更正