最近在开发一个 扫码枪扫商品条码创建商品 的 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);
};
这样就完美的阻止了浏览器默认打开图片的行为。