event.preventDefault和stopPropagation在拖放/事件中无法正常工作 [英] event.preventDefault and stopPropagationis not working as expected in drag/drop event

问题描述

 导出类JobDescription实现AfterViewInit {
 
 ..... 
 
 noPropagation：any =（e）=> {
 e.stopPropagation（）; 
 if（e.preventDefault）{
 return e.preventDefault（）; 
} else {
 return e.returnValue = false; 
} 
}; 
构造函数（公共路由器：路由器，公共路由：ActivatedRoute，public http：Http，public appState：AppState，private $ uibModal：NgbModal，private renderer：Renderer）{
 this.main = appState._state; 
 ..... 
} 
 ngAfterViewInit（）{
 this.dragViewInit（）; 
} 
 
 ........ 
 
 FileDragHover（e）{
 e = e ||事件; 
 this.noPropagation（e）; 
 jQuery（。upload-cta）。addClass（upload_cta_active）; 
}; 
 FileSelectHandler（e）{
 e = e ||事件; 
 this.noPropagation（e）; 
 this.FileDragHover（e）; 
 this.droppedFiles = e.target.files || e.dataTransfer.files; 
}; 
 
 
 dragViewInit（）{
 this.appState.set（dragViewInit，function（）{
 console.log（Init called）; 
 setTimeout（（）=> {
 var fileselect = document.getElementById（fileselect），
 filedrag = document.getElementById（dropzone）; 
 fileselect.addEventListener（更改，this.FileSelectHandler，false）; 
 var xhr = new XMLHttpRequest（）; 
 if（xhr.upload）{
 filedrag.addEventListener（dragover，this.FileDragHover，false ）; 
 filedrag.addEventListener（dragleave，this.FileDragHover，false）; 
 filedrag.addEventListener（drop，this.FileSelectHandler，false）; 
} 
控制台.log（Init is initilised）; 
}，500）
}）
} 
} 
   
 
 
如下：
  this._state [' open'] = function（tmplt，modalSize）{
 console.log（tmplt，tmplt）; 
 this ['modalInstance'] = ngbModal.open（tmplt，{size：modalSize}）; 
}; 
 
 this._state ['uploadCV'] = function（content）{
 this.open（content，'lg'）; 
 this.dragViewInit（）; 
}; 
  
我的html如下：
 < template ngbModalContainer>< / template> 
< template #uploadCV let-c =closelet-d =dismiss> 
< div class =modal-getintouch> 
< div class =modal-header> 
< h4 class =modal-title text-uppercase>上传您的CV< / h4> 
< button type =buttonclass =close（click）=c（'close'）> 
< i class =bi_interface-cross>< / i> 
< / button> 
< / div> 
< div class =modal-body> 
< section id =dropzoneclass =upload-cta pad-t-1 dropzone> 
< div class => 
< div class =upload-cv-icon col-lg-offset-4>< / div> 
< p class =center-text pad-b-3> 
将您的简历拖放到此处< br /> 
< span class =browse-files>您还可以< a href =javascript：void（0）（click）=clickInp（myFilInp）>浏览并选择文件<一个>< /跨度> 
< / p> 
< p> {{fileDesp}}< / p> 
< input class =box__filetype =file#myFilInp name =files []id =fileselectstyle =display：none（change）=showFiles（）/> 
 
< / div> 
< / section> 
< div class =row> 
< div class =col-12> 
< div * ngIf =filProgressclass =progress> 
< div class =progress-bar progress-bar-striped activerole =progressbar
 [attr.aria-valuenow] =filProgressaria-valuemin =0aria-valuemax =100[ngStyle] ={width：filProgress +'％'}> 
 40％
< / div> 
< / div> 
< / div> 
< / div> 
< div class =row> 
< button type =button[ngClass] ={'btn'：true，'btn-success'：true，'btn-default'：true，'pull-right'：true}点击）= 上传（） > 
< i class =fa fa-upload>< / i>上传
< / button> 
< / div> 
< / div> 
< / div> 
< / template> 
  
但是当我将图像文件拖放到 dropzone 它在浏览器中打开文件。
解决方案
下面的实现没有jquery，使用angular2 with typescript 
 
 
 
 HTML 
 < div（dragover）=allowDrop（$ event） drop）=onFileDrop（$ event）
 [class.drag-over] ='allowFileDrop'> 
< div class =file-upload-button> 
< label> 
上传简历
< input class =hide-filetype =file（change）=onFileChange（$ event）placeholder =Upload file ...accept =。pdf ，.DOC，.DOCX/> 
< / label> 
< / div> 
< / div> 
  
 Typescript 
  allowDrop（event）：void {
 event.preventDefault（）; 
 event.dataTransfer.setData（Drop Here，event.target.id）; 
 this.allowFileDrop = true; //突出显示拖放区域使用css类
} 
 
 onFileDrop（event）{
 event.preventDefault（）; 
 this.allowFileDrop = false; 
 let fileList：FileList = event.dataTransfer.files; 
 this.uploadResume（fileList）; 
} 
 
 onFileChange（event）{
 let fileList：FileList = event.target.files; 
 this.uploadResume（fileList）; 
} 
 
 private uploadResume（fileList：FileList）{
 if（fileList.length> 0）{
 let file：File = fileList [0]; 
 console.log（file.name）; 
} 
} 
  
 
I'm implementing file drag/drop in angular2 as follows.
export class JobDescription implements AfterViewInit {

  .....

  noPropagation:any=(e)=>{
    e.stopPropagation();
    if (e.preventDefault) {
      return e.preventDefault();
    } else {
      return e.returnValue = false;
    }
  };
  constructor(public router: Router,public route:ActivatedRoute, public http: Http,public appState: AppState,private $uibModal: NgbModal,private renderer:Renderer) {
    this.main=appState._state;
    .....
  }
  ngAfterViewInit() {
    this.dragViewInit();
  }

  ........

  FileDragHover(e){
    e = e || event;
    this.noPropagation(e);
    jQuery(".upload-cta").addClass("upload_cta_active");
  };
  FileSelectHandler(e){
    e = e || event;
    this.noPropagation(e);
    this.FileDragHover(e);
    this.droppedFiles = e.target.files || e.dataTransfer.files;
  };


  dragViewInit(){
    this.appState.set("dragViewInit",function () {
      console.log("Init called");
      setTimeout(()=>{
        var fileselect = document.getElementById("fileselect"),
          filedrag = document.getElementById("dropzone");
        fileselect.addEventListener("change", this.FileSelectHandler, false);
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {
          filedrag.addEventListener("dragover", this.FileDragHover, false);
          filedrag.addEventListener("dragleave", this.FileDragHover, false);
          filedrag.addEventListener("drop", this.FileSelectHandler, false);
        }
        console.log("Init is initilised");
      },500)
    })
  }
}
in My service appState is as follows:
this._state['open'] = function(tmplt, modalSize) {
      console.log("tmplt",tmplt);
      this['modalInstance'] = ngbModal.open(tmplt, {size: modalSize});
    };

this._state['uploadCV'] = function(content){
      this.open(content, 'lg');
      this.dragViewInit();
    };
My html is as follows:
<template ngbModalContainer></template>
<template #uploadCV let-c="close" let-d="dismiss">
  <div class="modal-getintouch">
    <div class="modal-header">
      <h4 class="modal-title text-uppercase">Upload your CV</h4>
      <button type="button" class="close" (click)="c('close')">
        <i class="bi_interface-cross"></i>
      </button>
    </div>
    <div class="modal-body">
      <section id="dropzone" class="upload-cta pad-t-1 dropzone">
        <div class="">
          <div class="upload-cv-icon col-lg-offset-4"></div>
          <p class="center-text pad-b-3">
            Drag and drop your resume here<br />
            <span class="browse-files">You can also <a href="javascript:void(0)" (click)="clickInp(myFilInp)">browse and choose files</a></span>
          </p>
          <p>{{fileDesp}}</p>
          <input class="box__file" type="file" #myFilInp name="files[]" id="fileselect" style="display: none" (change)="showFiles()" />

        </div>
      </section>
      <div class="row">
        <div class="col-12">
          <div *ngIf="filProgress" class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar"
                 [attr.aria-valuenow]="filProgress" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: filProgress+'%'}">
              40%
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <button type="button" [ngClass]="{'btn':true, 'btn-success':true,'btn-default':true, 'pull-right':true}" (click)="upload()">
          <i class="fa fa-upload"></i> Upload
        </button>
      </div>
    </div>
  </div>
</template>
But when I drag and drop a image file to dropzone It opens the file in the browser.
解决方案
below implementation without jquery, using angular2 with typescript

HTML
<div (dragover)="allowDrop($event)" (drop)="onFileDrop($event)"
[class.drag-over]='allowFileDrop'>
    <div class="file-upload-button">
        <label>
            Upload Resume
            <input  class="hide-file" type="file" (change)="onFileChange($event)" placeholder="Upload file..." accept=".pdf,.doc,.docx"/>
        </label>
    </div>
</div>
Typescript
allowDrop(event): void {
    event.preventDefault();
    event.dataTransfer.setData("Drop Here", event.target.id);
    this.allowFileDrop = true; // highlight drop zone on drag over using css class
}

onFileDrop(event) {
    event.preventDefault();
    this.allowFileDrop = false;
    let fileList: FileList = event.dataTransfer.files;
    this.uploadResume(fileList);
}

onFileChange(event) {
    let fileList: FileList = event.target.files;
    this.uploadResume(fileList);
}

private uploadResume(fileList: FileList){
    if(fileList.length > 0){
        let file: File = fileList[0];
        console.log(file.name);
    }
}


                        
这篇关于event.preventDefault和stopPropagation在拖放/事件中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！