Javascript 为什么单击div后会形成循环？

我已设置了文件输入的样式：

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

单击

.fakeFileContainer

后，控制台中出现以下错误消息：

Uncaught RangeError: Maximum call stack size exceeded

这是由循环引起的，但我不知道为什么这个循环会在这里形成。你能解释一下这种情况的原因吗

---

---

另外，请原谅任何拼写或语法错误，英语不是我的第一语言

您对

fileInput

的点击也由该函数处理（因为偶数会冒泡到容器）。所以代码说：“当点击时，触发另一个点击事件”。第二次单击事件导致再次询问相同的问题，而答案是再次触发另一次单击事件。因此，一个无限循环。

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

• 输入上单击事件的停止播放
• 如果已处理事件是在输入上发出的，则不要触发单击（通过检查

  src元素

  ）
• 或者将单击处理程序放在

  .fakeFile

  div上，而不是放在周围的容器上

---

文件输入上的单击事件导致事件冒泡到

.fakeFileContainer

。将单击事件更改为不冒泡：

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

某种形式的组合应该可以防止它循环到

.fakeFileContainer

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

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

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

    });

---

将类“fakeFileContainer”更改为id“fakeFileContainer”并放入$（“#文件”）[0]。单击（）；这对我来说很有用。

两者都是正确的。你只要不断地点击，点击！您希望单击做什么？您不应该在一个选择器中需要两个ID：

$（“#contact#file”）

。ID应该是唯一的，所以您只需要

$（“#文件”）

@JeffB好的，我会记住。对于jQuery事件，您应该使用

e.stopPropagation（）

来阻止事件冒泡。当我添加

e

作为参数时，我在控制台中得到了

，它会导致显示分页符。或者您可以向

.on（）添加选择器

：$（“#contact form.fakeFileContainer”）。在（'click'、'.fakeFile'，function（e）{}@jmoerdyk:这是相同的解决方案，只是事件委派在这里是不必要的。只是在列表中列出了另一种可能性，没有说这是最好的选择：PNow我不知道接受哪个答案。你们俩都给我解释了我的问题，但@Bergi也给了我解决方案，所以如果我接受他的答案，请不要生气：）我很高兴你们接受了他的答案，因为他提供了一个解决方案，而我没有。

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

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

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

    });