Js 禁止拖拽图片到浏览器默认打开事件 |
您所在的位置：网站首页 › 怎么保存图片到浏览器打开不了 › Js 禁止拖拽图片到浏览器默认打开事件 |
Js 禁止拖拽图片到浏览器默认打开事件
|
最近在开发一个 扫码枪扫商品条码创建商品 的 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); };这样就完美的阻止了浏览器默认打开图片的行为。 |
【本文地址】