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也由该功能处理（因为容器会冒泡）。所以代码说：“点击时，触发另一个点击事件”。第二次单击事件会导致再次询问相同的问题，答案是再次触发另一个单击事件。因此，一个无限循环。

于 2013-02-20T18:40:26.977 回答
4

触发的点击事件会冒泡，您在父元素上捕捉到它以触发下一次点击 - 创建一个无限循环。为了防止这种情况，您可以

  • stopPropagation输入上的点击事件
  • 如果在输入上发出已处理的事件，则不触发点击（通过检查srcElement）
  • 或将点击处理程序放在.fakeFilediv 而不是周围的容器上。
于 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 回答
0 
     $("#fakeFileContainer").on('click', function (e) {

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

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

    });

将类“fakeFileContainer”更改为 id“fakeFileContainer”并放入 $("#file")[0].click(); 这对我有用。

于 2017-09-08T07:41:55.453 回答