javascript - 为什么我在触发点击时遇到过多的递归？

Question

我的 C# Web 应用程序中有以下代码:

<div id="divDocument" class="cursor-pointer">
  <i class="icon-document font-size-3em mt10 fileupload-border"></i>
  <asp:FileUpload ID="fileUploadDocument" runat="server" CssClass="d-none" />
</div>

$(document).ready(function () {
  $("#divDocument").click(function () {
    $("#<%= fileUploadDocument.ClientID %>").trigger('click');
  });
});

但是我在 javascript 控制台收到以下错误:

InternalError: too much recursion

有人可以帮助我吗？

亲切的问候

Answer 1

该错误是因为您在当前元素的子元素上引发了单击事件，该子元素正在处理单击事件，从而创建无限循环。

要解决此问题，您需要删除内部 trigger('click')，或者在该内部元素上添加 stopPropagation() 调用。

但是值得注意的是，如果您的目标是增加文件输入的命中区域，那么更好的方法是将 label 元素包裹在 输入。这可以避免您的问题并消除对任何 JS 代码的需要。

<label>
  <i class="icon-document font-size-3em mt10 fileupload-border"></i>
  <asp:FileUpload ID="fileUploadDocument" runat="server" CssClass="d-none" />
</label>