Js 禁止拖拽图片到浏览器默认打开事件

原创已于 2022-03-25 10:30:30 修改 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-03-25 10:29:09 首次发布

react 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何通过JavaScript阻止浏览器默认打开拖拽的图片，采用addEventListener和removeEventListener实现页面上的图片拖拽上传功能，避免意外打开图片导致的用户体验下降。

最近在开发一个 扫码枪扫商品条码创建商品 的 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);
};

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