L’evento di rilascio HTML5 non funziona a meno che non venga gestito il trascinamento

Sto ascoltando l’evento drop e faccio e.preventDefault() ma sta provando ad aprire il file rilasciato. Sta funzionando bene fino a ieri. Ma proprio oggi si è rotto per qualche motivo sconosciuto. Ho creato un JsFiddle#bwquR/10 per riflettere lo stesso.

Modificare:

Sembra che se non si prenda la dragover dell’evento di drop non può essere gestita. anche nel violino Se commentate il dragover non funzionerà.
Nel lavoro effettivo mi è sfuggita l’ortografia del dragover ma è ancora una questione di drop che non funzionerà senza il dragover

Il violino stava funzionando, ma il corpo era così piccolo (solo il testo DROP lì). Stava prendendo l’evento drop solo su quella piccola area dove il testo DROP non si trova su tutto il corpo. Quindi ho pensato che non funzionasse. dispiace per la confusione.

Suppongo che sia perché senza gestore di eventi dragOver, viene utilizzato il gestore di eventi predefinito dell’evento dragOver, quindi non viene triggersto alcun evento di rilascio. È necessario e.preventDefault per l’evento dragOver prima dell’evento di rilascio.

Non sono sicuro di aver compreso correttamente il problema, ma se vuoi leggere i file rilasciati devi gestire l’evento dragover e inserire almeno questa riga di codice:

 evt.dataTransfer.dropEffect = 'copy'; 

altrimenti dropEffect è nullo di default e non otterrai alcun dato.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

Se si desidera consentire una perdita, è necessario impedire la gestione predefinita annullando l’evento. Puoi eseguire questa operazione restituendo false da un listener di eventi definito dagli attributi o chiamando il metodo event.preventDefault dell’evento. Quest’ultimo può essere più fattibile in una funzione definita in uno script separato.

 

Chiamando il metodo preventDefault durante sia un evento dragenter sia un evento di trascinamento indicherà che una goccia è consentita in quella posizione. Tuttavia, in genere si desidera chiamare il metodo preventDefault solo in determinate situazioni, ad esempio, solo se viene trascinato un collegamento. Per fare ciò, chiama una funzione che verifica una condizione e annulla solo l’evento quando la condizione è soddisfatta. Se la condizione non viene soddisfatta, non annullare l’evento e non si verificherà alcuna interruzione se l’utente rilascia il pulsante del mouse.

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */ document.addEventListener("dragover", function( event ) { // prevent default to allow drop event.preventDefault(); }, false); 

Funziona bene per me. Stai caricando questo come un URL HTTP o FILE? Credo che debba essere un URL HTTP con Chrome.