为什么我在点击触发器时会遇到太多递归

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：递归过多

有人能帮我吗？

问候

Answer 1

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

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

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

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

Answer 2

这是因为在点击时，您会触发对子元素的点击，而子元素又会触发对其父元素(即当前元素(的点击，从而触发对子元素的点击等等

正如Rory McCrossan正确建议的那样，你可以通过标签来防止这种情况的发生，这将在点击的情况下解决问题，然而，这是一个非常具体的解决方案，我认为这是一种更通用的解决方案。即使在物品周围包裹标签不是一种选择，或者如果事件不是点击，它也会起作用。

这就是你可以做到的：

$(document).ready(function () {
$("#divDocument").click(function (event) {
if ((event.target || event.srcElement).id !== "<%= fileUploadDocument.ClientID %>") $("#<%= fileUploadDocument.ClientID %>").trigger('click');
});
});