Pertanyaan Mengapa loop terbentuk setelah klik pada div?


Saya telah memasukkan input file:

<div class="fakeFileContainer">
 <div class="fakeFile">Dołącz brief</div>
 <input id="file" type="file" name="file"/>
</div>

untuk bagian kode ini saya punya beberapa baris js:

var fileInput = $('#contact #file')

fileInput.change(function(){
    $this = $(this);
    $('#contact form .fakeFile').text($this.val());
})

$('#contact form .fakeFileContainer').on('click', function () {
    fileInput.click(); //looping here
}).show();

Setelah klik .fakeFileContainer Saya punya pesan kesalahan ini di konsol:

Uncaught RangeError: Maximum call stack size exceeded

Ini disebabkan oleh loop, tetapi saya tidak tahu mengapa loop ini terbentuk di sini. Dapatkah saya menjelaskan alasan dari situasi ini?



P.S. Mohon maafkan kesalahan ejaan atau tata bahasa, bahasa Inggris bukanlah bahasa pertama saya


4
2018-02-20 18:37


asal


Jawaban:


Peristiwa klik yang dipicu bergolak, dan Anda menangkapnya tepat di elemen induk untuk memicu klik berikutnya - membuat loop tak terbatas. Untuk mencegah ini, Anda juga bisa

  • stopPropagation peristiwa klik pada input
  • jangan memicu klik jika acara yang ditangani dikeluarkan pada input (dengan mencentang srcElement)
  • atau meletakkan handler klik pada .fakeFile div bukannya wadah sekitarnya.

4
2018-02-20 18:41



Klik Anda fileInput ditangani oleh fungsi itu juga (karena gelembung bahkan sampai ke wadah). Jadi kode mengatakan: "ketika diklik, memicu peristiwa klik lain". Peristiwa klik kedua itu menyebabkan pertanyaan yang sama ditanyakan lagi, dan jawabannya adalah, sekali lagi, untuk mengaktifkan peristiwa klik lain. Dengan demikian, loop tak terbatas.


6
2018-02-20 18:40



Acara klik di fileInput menyebabkan acara meluap hingga .fakeFileContainer. Ubah acara klik Anda agar tidak menggelembung:

$('#contact form .fakeFileContainer').on('click', function (e) {
    e.stopPropagation();
    fileInput.click();
}).show();

Semacam kombinasi yang harus menjaga dari lingkaran ke atas .fakeFileContainer.


0
2018-02-20 18:42



     $("#fakeFileContainer").on('click', function (e) {

        e.stopPropagation();
        console.log(e);

        $("#file")[0].click();

    });

chnage class "fakeFileContainer" ke id "fakeFileContainer" dan menaruh $ ("# file") [0] .click (); ini bekerja untukku.


0
2017-09-08 07:41