我正在使用一个指令来获取文件,当它被放在HTML元素上时,它在chrome中正常工作但它在IE11中不起作用。 以下是来自'@ angular / core'的拖放事件导入{Directive,HostListener,Output,EventEmitter}的代码;
@Directive({
selector: '[appDragDrop]'
})
export class DragDropDirective {
constructor() { }
@Output()
FileDragEvent: EventEmitter<File> = new EventEmitter<File>();
@HostListener('window:drop', ['$event']) public onDrop(event) {
event.preventDefault();
event.stopPropagation();
if (event.dataTransfer.items[0].type != 'application/vnd.ms-excel') {
return false;
}
let files = event.dataTransfer.files;
this.FileDragEvent.emit(files);
}
@HostListener('window:dragover', ['$event']) public onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
}
@HostListener('window:dragleave', ['$event']) public onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
}
}
最初我只是为@hostlistener使用这样的
@HostListener('dragover',
但后来我在一些博客中读到,要求我把它改成这样
@HostListener('window:dragover',
我也尝试给min-height赋予了具有拖放指令的元素,但我仍然面临着这个问题。
功能在chrome中运行顺利,但我在IE11中面临问题
从IE11的某些样式pointer-events: none
中删除,一切似乎都有效