Warum Auslösung ein click-Ereignis auf ein file-input löst auch das submit-Ereignis auf dem Formular?

Ich bin Kürschner ein file-input in ein HTML-Formular. Ich erreichte das Ergebnis, indem er den Eingang, dann habe ich dafür meinen eigenen button und onclick auf die Schaltfläche, die ich auslösen des click-Ereignisses auf den versteckten Eingang zu öffnen, die native Browser-Fenster. Das funktioniert auch, aber wenn ich in der Nähe der Fenster, die Javascript-submit-handler wird ausgelöst, auf die form (aber nicht reichen wirklich geschehen, nur das Ereignis ausgelöst wird).

Bereitete ich ein Turnschuh: http://jsfiddle.net/Ebcu5/

HTML:

<form id="form">
    <input id="file" type="file" name="photo" />
    <button id="upload">Browse</button>
</form>

JS:

$("#form").submit(function(){
    alert('submit event triggered');
});

document.getElementById('upload').addEventListener('click',function(){
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);
    uploading = true;
    document.getElementById('file').dispatchEvent(evt);
});

CSS:

input#file { position: fixed; top: -100px; }
button { border: solid 3px black; border-radius: 3px; font-size: 18px; line-height: 20px; text-transform: uppercase; font-family: Arial; line-height: 31px; background: #fd6706; border-radius: 13px; }
  • Wahrscheinlich sind Sie miss-Diagnose des Problems. Ich sehe keine id="upload" - element, und ich bin bereit zu Wetten, es ist die Taste. Anklicken einer Schaltfläche löst den submit-Ereignis, es sei denn, die Taste wird ausdrücklich festgelegt als type="button". jsfiddle.net/Ebcu5/1
  • Warum Sie mit regelmäßigen JS und jQuery wie hier? Wäre viel sauberer und einfacher mit nur jQuery...
  • Sorry, es war ein copy&paste-Fehler... mein button hat die id="upload" - wie in der Geige. Hochgeladene Datei.
  • Nur weil code, der geboren wird, in verschiedenen Zeiten 🙂
InformationsquelleAutor Marco Marsala | 2013-11-26
  1. 4

    Gelöst. Verwenden Sie einfach einen evt.preventDefault() in den upload-click-Ereignishandler.

    Aktualisiert fiddle: http://jsfiddle.net/Ebcu5/2/

    document.getElementById('upload').addEventListener('click',function(evt){
                evt.preventDefault();
    document.getElementById('file').click();
});
    • oder stellen Sie einfach die Taste a-Taste. type="button"
    • type="button" fixiert es für mich. Es macht Sinn. danke
    • e.preventDefault(); ist die magic sauce.
    InformationsquelleAutor Marco Marsala
  2. 1

    Ändern: <button id="upload">Browse</button>

    Zu: <button id="upload" type="button">Browse</button>

    Kredit für dieses Bild geht an Kevin B für seinen Kommentar auf eine andere Antwort:

    oder stellen Sie einfach die Taste a-Taste. type="button" – Kevin B Nov 26 '13 at 22:35

    Wollte einfach, dass es eine tatsächliche Antwort, damit die Leute ihn sehen würde, ohne zu Graben durch die Kommentare.

    InformationsquelleAutor ThinkingCap
Schreibe einen Kommentar