4

ファイル入力のスタイルを設定しました：

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

コードのこの部分には、いくつかの 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();

をクリックした後.fakeFileContainer、コンソールに次のエラー メッセージが表示されます。

Uncaught RangeError: Maximum call stack size exceeded

ループが原因ですが、なぜこのループがここで形成されたのかはわかりません。この状況の理由を説明してもらえますか?


PS 英語は私の母国語ではありません。

4

4 に答える 4

6

クリックfileInputもその関数によって処理されます (コンテナーまでバブルが発生するため)。したがって、コードは「クリックすると、別のクリックイベントをトリガーします」と言っています。その 2 回目のクリック イベントにより、同じ質問が再度行われます。その答えは、もう一度、別のクリック イベントを発生させることです。したがって、無限ループ。

于 2013-02-20T18:40:26.977 に答える
4

トリガーされたクリック イベントがバブルアップし、親要​​素でそれをキャッチして次のクリックをトリガーし、無限ループを作成します。これを防ぐには、次のいずれかを実行できます

  • stopPropagation入力のクリックイベントの
  • 処理されたイベントが入力で発行された場合、クリックをトリガーしません (をチェックすることによりsrcElement) 。
  • または、クリック ハンドラーを.fakeFile周囲のコンテナーではなく div に配置します。
于 2013-02-20T18:41:08.713 に答える
0

のクリック イベントfileInputにより、イベントが にバブル アップし.fakeFileContainerます。クリック イベントをバブルしないように変更します。

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

の何らかの組み合わせにより、 へのループを防ぐ必要があり.fakeFileContainerます。

于 2013-02-20T18:42:08.083 に答える