PROJET AUTOBLOG


Warrior du Dimanche

Site original : Warrior du Dimanche

⇐ retour index

Le panda roux, l'event Drop et le preventDefault()

mercredi 30 septembre 2020 à 10:33

Sous ce titre, qui siérait au conte d'un Lafontaine geek, se cache un des plus grands mystères de l'univers observable qui, pourtant, ne semble concerner que môa...

Quand je cherche à drag et drop un fichier sur un élément HTML pour en gérer l'upload via JS, je fais tout bien comme on m'a expliqué dans les tutos, les stackoverflow pis toussa:


// Une page de test qui est censée permettre de capter l'événement Drop sur un body id="body"
// version simplifiée et sans lib de mon problème
document.getElementById("body").addEventListener("drop",function(e){
        console.log(e);
        e.preventDefault();
        e.stopPropagation();
})

Hélas, quand je drope un fichier sur ma page, Firefox charge le fichier et l'affiche (ou en lance le téléchargement)

Pour faire simple  le preventDefault ne prevent absolument rien  le con.jpg

En plus, comme le chargement casse tout, impossible de vérifier dans la console que l'événement se déclenche bien dans js (même en conservant les journaux)...

Ha ça  les autres dragenter dragleave & consorts  eux  ils sont impeccablement gérés    Mais le drop  dans ton cul  si j ose dire   .jpg

Je me rappelle que j'ai déjà rencontré le souci à chaque fois que j'ai voulu faire ça mais impossible de me souvenir comment j'ai fait pour y parvenir... pire, j'ai regardé mes scripts précédents qui semblent fonctionner et il n'y a rien de particulier dedans...

Je sens bien que ça doit venir de moi  notez   .jpg

<link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/style.css"/> <link rel="stylesheet" href="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/> <script src="http://www.warriordudimanche.net/./plugins/Galart/assets/lightbox.js"> <script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});

► Commentaires