如何实现全局禁用右键点击与Control+U快捷键的组件？

核心思路 #

通过监听全局DOM事件，阻止右键菜单的默认触发行为，以及拦截Ctrl+U组合键的默认操作。需要注意在组件生命周期内正确绑定/解绑事件，避免内存泄漏。

纯JavaScript实现（无框架依赖） #

适合原生JS项目或任何前端框架集成：

class GlobalActionDisabler {
  // 初始化事件监听
  enable() {
    document.addEventListener('contextmenu', this.#blockRightClick);
    document.addEventListener('keydown', this.#blockCtrlU);
  }

  // 销毁事件监听
  disable() {
    document.removeEventListener('contextmenu', this.#blockRightClick);
    document.removeEventListener('keydown', this.#blockCtrlU);
  }

  // 私有方法：阻止右键菜单
  #blockRightClick(e) {
    e.preventDefault();
  }

  // 私有方法：阻止Ctrl+U快捷键
  #blockCtrlU(e) {
    if (e.ctrlKey && e.key.toLowerCase() === 'u') {
      e.preventDefault();
    }
  }
}

// 使用示例
const actionDisabler = new GlobalActionDisabler();
// 页面加载后启用
window.addEventListener('load', () => actionDisabler.enable());
// 页面卸载时清理
window.addEventListener('beforeunload', () => actionDisabler.disable());

React组件实现 #

利用React的useEffect钩子管理事件监听的生命周期：

import { useEffect } from 'react';

const DisableGlobalActions = () => {
  useEffect(() => {
    // 阻止右键菜单
    const blockRightClick = (e) => e.preventDefault();
    // 阻止Ctrl+U
    const blockCtrlU = (e) => {
      if (e.ctrlKey && e.key.toLowerCase() === 'u') {
        e.preventDefault();
      }
    };

    // 绑定全局事件
    document.addEventListener('contextmenu', blockRightClick);
    document.addEventListener('keydown', blockCtrlU);

    // 组件卸载时解绑事件
    return () => {
      document.removeEventListener('contextmenu', blockRightClick);
      document.removeEventListener('keydown', blockCtrlU);
    };
  }, []);

  return null; // 无需渲染DOM元素
};

// 在应用根组件中引入即可全局生效
function App() {
  return (
    <div className="app-container">
      <DisableGlobalActions />
      {/* 你的应用内容 */}
    </div>
  );
}

关键注意事项 #

• 这种方式仅能阻止前端层面的常规操作，无法完全阻止用户查看源代码（比如通过浏览器开发者工具菜单、F12快捷键等），不要用它来保护敏感内容。
• 必须在组件卸载或页面关闭时移除事件监听器，否则会导致内存泄漏。
• 部分浏览器可能存在兼容性差异，比如某些浏览器对key值的返回可能不同，建议用e.key.toLowerCase()来兼容大小写。

内容的提问来源于stack exchange，提问作者Dener Marcos Barros