Angular HostListener preventDefault 不起作用答案

【问题标题】：Angular HostListener preventDefault not workingAngular HostListener preventDefault 不起作用
【发布时间】：2021-04-07 08:22:53
【问题描述】：

我正在尝试创建文件拖放上传。我已经使用 Angular 指令中的 HostListener 创建了带有 dragenter、dragleave 和 drop 事件的 div 容器。 dragenter 和 dragleave 事件正在工作，但在 drop 事件中 event.preventDefault() 不起作用。我的活动代码：

@HostListener('drop', ['$event']) onDrop = (event): void => {
    event.preventDefault();
}

我还尝试在 HTML DOM 中添加带有 (drop)="function($event)" 的事件，但这也不起作用。

【问题讨论】：

发生了什么不应该发生的事情？你确定preventDefault 会阻止这种行为吗？可能有另一个事件触发了drop。
抱歉忘了告诉。当我使用事件在 div 容器上拖动图像时，它将在我的浏览器中打开图像（在 chrome 中它会打开一个新选项卡，在 Firefox 中它会在同一个选项卡中打开），或者当我拖动任何其他不受支持的文件格式时通过浏览器它会下载它。至少我知道，没有其他事件可以阻止它。我刚刚创建了那个角度组件，没有其他东西可以阻止它。
这个问题可能对你有帮助：stackoverflow.com/questions/35274028/…
谢谢，但这也无济于事 :( 但该事件肯定会触发，我已经在“文件”类型的输入上对其进行了测试。但在 div 本身上它仍然打开图片在我的浏览器中：/
我创建了一个新的 Angular 项目，删除了 app.component.html 中的所有内容，创建了一个 div <div id="dropZone" (drop)="dropZoneEvent($event)"></div> 和代码 dropZoneEvent($event: DragEvent) {$event.preventDefault(); } 以及一些用于背景颜色和大小的 css。 .仍然没有工作......我做错了什么？？？ :(

标签： angular typescript events preventdefault angular11

【解决方案1】：

来自MDN website：

Event 接口的preventDefault() 方法告诉用户代理，如果事件没有得到显式处理，则不应像往常一样采取其默认操作。 事件继续像往常一样传播，除非其中一个事件侦听器调用 stopPropagation() 或 stopImmediatePropagation()，其中任何一个都会立即终止传播。

所以请尝试改用event.stopPropagation() 或event.stopImmediatePropagation()。

【讨论】：

感谢您的回答，但不幸的是，这也不起作用。我已经单独和一起尝试过它们，但它仍在打开图像。我可以以某种方式测试事件是否正在触发吗？在 Firefox 中当然没有任何反应，因为图像在同一个选项卡中打开，但是在 chrome 中？那里的图像在新选项卡中打开，但是当我控制台记录任何内容时，我在控制台中什么也看不到......？ :/ 但这应该是因为 dragenter 和 dragleave 也可以正常工作，并且我以相同的方式添加了 drop 事件...
实际上不知道它是否应该工作，但如果我在 html 文件中这样做：<div id="fileDropzone" (drop)="$event.preventDefault()" appEventDrag> 它不适用于所有三个（preventDefault、stopPropagation、stopImmediatePropagation）。并且 div 元素没有子元素，所以这也不是原因