[JavaScript知识库]Uncaught RangeError: Maximum call stack size exceeded

错误

Uncaught RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at camelCase (jquery-3.6.0.js:4220:44)
    at Data.get (jquery-3.6.0.js:4301:52)
    at Object.trigger (jquery-3.6.0.js:8716:24)
    at HTMLInputElement.<anonymous> (jquery-3.6.0.js:8797:17)
    at Function.each (jquery-3.6.0.js:385:19)
    at jQuery.fn.init.each (jquery-3.6.0.js:207:17)
    at jQuery.fn.init.trigger (jquery-3.6.0.js:8796:15)
    at jQuery.fn.init.jQuery.fn.<computed> [as click] (jquery-3.6.0.js:10746:10)
    at HTMLDivElement.<anonymous> (main.js:14:36)

原因

实现文件上传功能

<div class="div-upload">
	<img src="upload.png" alt="上传">                              
   <input id="upload" type="file" style="display: none;">
</div>

$(".div-upload").click(function(){
	$("#upload").click();
});

html中div包含input，js中div的click事件包含input的click事件。点击后报栈溢出错误，input的click多次执行

解决办法

1.不要使用jquery方法获取input，使用js原生方式获取input

$(".div-upload").click(function(){
	document.getElementById("upload").click();
});

2.不要使用父子嵌套方式设置点击事件，使用同级方式设置

$(".div-upload img").click(function(){
	$("#upload").click();
});

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读