如何在Angular2中阻止输入框指令宿主的Drop事件？

嘿，你已经搞定了阻止粘贴的逻辑，那阻止Drop事件其实大同小异，只需要给指令新增一个@HostListener监听drop事件就行，不过要注意事件类型是DragEvent而不是之前的KeyboardEvent哦。

直接看完整的代码示例吧：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[blockPasteAndDrop]' // 替换成你自己的指令选择器即可
})
export class BlockPasteAndDropDirective {

  // 你原来的阻止粘贴逻辑
  @HostListener('paste', ['$event']) blockPaste(e: KeyboardEvent) {
    e.preventDefault();
  }

  // 新增的阻止Drop事件逻辑
  @HostListener('drop', ['$event']) blockDrop(e: DragEvent) {
    e.preventDefault();
    // 可选：如果需要阻止事件冒泡，可以加上这行
    // e.stopPropagation();
  }

  // 额外补充：建议同时监听并阻止dragover事件
  // 因为浏览器默认会在dragover阶段阻止drop事件触发，必须先阻止dragover的默认行为，drop才会生效
  @HostListener('dragover', ['$event']) blockDragOver(e: DragEvent) {
    e.preventDefault();
  }
}

为什么要加dragover的监听？ #

简单说，浏览器的默认规则是：当你把元素拖拽到目标上时，只有目标元素明确“允许放置”（通过阻止dragover的默认行为来标记），才会触发drop事件。如果只处理drop而不管dragover，大概率会发现drop事件根本不会被触发，这是很多人容易踩的小坑～

这样修改后，你的指令就能同时阻止粘贴和拖拽放置的操作啦！

内容的提问来源于stack exchange，提问作者Shamim Hossain