最近在开发一个 扫码枪扫商品条码创建商品 的 Demo，里面用到了 图片拖拽到浏览器上传。使用过程中遇到了 用户不小心拖拽到了 上传组件 之外的页面上，这样就触发了浏览器的默认行为，自动打开网页打开了图片，整个操作流程就会卡顿，造成了很不好的体验。此时，就需要用到冒泡 / 挖洞原理，来禁止浏览器的默认打开图片的事件。

页面是这样的：

里面上传用的是antd 的 upload 组件结合 Form 表单。

我们可以用 addEventListener 和 removeEventListener 来绑定和解除对整个页面的事件监听。

1.先定义一个阻止默认事件的函数：

 // 阻止默认事件Function
  forbidDefaultEvent = (e) => {
    e.preventDefault();
  }

2.然后在页面渲染后添加对页面移入事件的监听：

componentDidMount = async () => {
    // 禁止浏览器打开拖拽的图片
    document.addEventListener('drop', this.forbidDefaultEvent, false);
    document.addEventListener('dragover', this.forbidDefaultEvent, false);
};

3.最后记得要在页面离开的时候解除监听：

componentWillUnmount = async () => {
    document.removeEventListener('drop', this.forbidDefaultEvent, false);
    document.removeEventListener('dragover', this.forbidDefaultEvent, false);
};

这样就完美的阻止了浏览器默认打开图片的行为。