【前端面试】事件监听机制&React 的事件系统实现

自动跳转空白页：

onMounted(() => {
  setInterval(() => {
    const screenWidth = window.screen.width
    const innerWidth = window.innerWidth
    const screenHeight = window.screen.height
    const innerHeight = window.innerHeight
    //如果窗口外部宽度-内部宽度大于200，或者外部高度-内部高度大于200，就跳转到about:blank
    if (screenWidth - innerWidth > 200 || screenHeight - innerHeight > 200) {
      // 重定向到空白页，或者清空页面内容
      window.location.href = 'about:blank'
      // document.body.innerHTML = '请勿调试'
    }
  }, 500)
})

禁用鼠标右键，F12、ctrl + s 等快捷键：

const preventCtrl = (e) => {
    if (e.keyCode === 123) {
        // F12
        e.preventDefault()
        return false
    } else if (e.keyCode === 17) {
        // ctrl
        document.onkeydown = preventS
        return false
    }
    return true
}

const preventS = (e) => {
    if (e.keyCode === 123 || e.keyCode === 83) {
        // s，防止ctrl + s
        e.preventDefault()
        return false
    }
    return true
}

const nopreventS = (e) => {
    if (e.keyCode === 17) {
        document.onkeydown = preventCtrl
    }
}

// 添加在App.vue中
onMounted(() => {
    document.onkeydown = preventCtrl
    document.onkeyup = nopreventS
    // 鼠标右键
    document.oncontextmenu = (e) => {
        e.preventDefault()
    }
}, 500)

无限debugger：

const checkDebugger = () => {
  const d = new Date().getTime()
  // 自动创建临时脚本
  Function('debugger')()
  const dur = Date.now() - d
  return dur >= 5
}

const breakDebugger = () => {
  if (checkDebugger()) {
    breakDebugger()
  }
}


// 添加在App.vue中
onMounted(() => {
  setInterval(breakDebugger, 500)
})

内存爆破：

onMounted(() => {
    // 最终导致页面卡死无响应
    setInterval(() => {
        const startTime = new Date().getTime()
        debugger
        const endTime = new Date().getTime()
        const stack = []
        if (endTime - startTime > 100) {
            for (;;) {
                stack.push(this)
            }
        }
    }, 500)
})

无限清除控制台：

onMounted(() => {
    setInterval(() => console.clear(), 500)
}) 

无限弹框：

onMounted(() => {
  setInterval(() => {
    const c = new RegExp('1')
    c.toString = () => {
      alert('检测到调试')
      return '检测到调试'
    }
    console.log(c)
  }, 500)
})