如何在React应用中用JavaScript阻止Chrome拖拽图片时打开新标签页

问题原因 #

Chrome对拖拽到页面内的外部图片资源默认会执行「新标签页打开资源」的行为，你只需要在相关拖拽事件中阻止浏览器默认行为即可解决该问题，不会影响原有拖拽功能的正常运行。

实现方案 #

单个拖拽区域处理 #

给你的自定义拖拽容器同时绑定onDragOver和onDrop两个事件，两个事件都调用event.preventDefault()即可：

import { useCallback } from 'react';

function CustomDropArea() {
  const handleDragOver = useCallback((e) => {
    // 必须阻止dragover的默认行为
    e.preventDefault();
    // 可选：设置拖拽时的鼠标反馈样式
    e.dataTransfer.dropEffect = 'copy';
  }, []);

  const handleDrop = useCallback((e) => {
    // 必须阻止drop的默认行为
    e.preventDefault();
    // 这里保留你原有拖拽功能的处理逻辑
    const dropFiles = e.dataTransfer.files;
    console.log('获取到的拖拽文件：', dropFiles);
  }, []);

  return (
    <div
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      style={{ width: '400px', height: '400px', border: '2px dashed #aaa' }}
    >
      拖拽图片到此处
    </div>
  );
}

全应用范围阻止 #

如果需要整个应用内都禁止该默认行为，可以全局绑定事件拦截：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const preventDragDefault = (e) => e.preventDefault();
    // 全局绑定两个拖拽事件
    document.addEventListener('dragover', preventDragDefault);
    document.addEventListener('drop', preventDragDefault);
    
    // 组件卸载时解绑事件避免内存泄漏
    return () => {
      document.removeEventListener('dragover', preventDragDefault);
      document.removeEventListener('drop', preventDragDefault);
    };
  }, []);

  return <div>你的应用原有内容</div>;
}

注意事项 #

• 必须同时处理dragover和drop两个事件的默认行为，仅给drop事件加阻止逻辑无法拦截Chrome的默认打开行为
• 如果页面存在其他需要保留原生拖拽行为的元素，不要使用全局绑定方案，仅给自定义拖拽区域绑定事件即可

内容的提问来源于stack exchange，提问作者Dmitry Suponkin