这样设置通常是出于安全性或保护内容的目的，不想让别人看到源代码等信息

网页禁止右键 禁止F12 JavaScript禁止F12 禁止右键菜单 js

JavaScript 中

<script>
// 禁止右键
document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

// 禁止F12快捷键
document.onkeydown = function (e) {
    if (e.which === 123 || e.key === "F12"  || e.key === "Inspect") {
        e.preventDefault();
    }
};
<script>

Jquery 中

<script>
		debugger
        function checkForDevTools() {
            // 创建一个元素并尝试调用 `console.log`，如果开发者工具打开，将返回 false
            const element = new Image();
            element.__defineGetter__('id', function () {
                // 开发者工具已打开，关闭当前页面
                window.close();
            });
            window.close();
            console.clear(); // 清除控制台，以隐藏上面的消息
            console.log(element);
        }

        $(document).ready(function () {
            checkForDevTools();
        });
</script>

<script>
        // 禁止右键菜单
        $(document).on('contextmenu', function (e) {
            e.preventDefault();
        });

        // 禁止F12
        $(document).on('keydown', function (e) {
             if (e.which === 123 || e.key === "F12" || e.key === "Inspect") {
                 e.preventDefault();
             }
        });
</script>

Vue 中

将禁止右键和禁止F12键的逻辑放在mounted生命周期钩子中，以确保它们在组件加载后生效。

<template>
  <div>
    <p>这是一个示例页面。</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 禁止右键菜单
    document.addEventListener('contextmenu', (e) => {
      e.preventDefault();
    });

    // 禁止F12键
    document.onkeydown = (e) => {
      if (e.which === 123 || e.key === "F12" || e.key === "Inspect") {
        e.preventDefault();
      }
    };
  },
};
</script>