Uncaught RangeError: Maximum call stack size exceeded 超出最大调用值（个人解释）

写了段jq后，报这个错，度娘未解，灵光一闪，找到原因，上代码:

Html 结构：

<a href="javascript:;" class="item-pic">
    <p class="tit">封面</p>
    <input type="file" name="file" style="width:50px;height:50px;display:none" >
</a>

jq代码

<script>
$(function(){
    $(".item-pic").click(function(e) {    
        $(this).find("input").trigger('click');
    });
})
</script>

console 报错：

Uncaught RangeError: Maximum call stack size exceeded

百思不得姐！

自悟，点击a标签后触发内部的file的input的点击事件，导致点击事件冒泡至a标签（即a再次被点击），再次执行jq，导致无线循环。进而报错！！

可将input移出a标签；或者阻止冒泡；

html 新结构

<a href="javascript:;" class="item-pic">
    <p class="tit">封面</p>
</a>
<input type="file" name="file" style="width:50px;height:50px;display:none" >


<script>
    $(function(){
       $(".item-pic").click(function(e) {
          // e.preventDefault();
           $(this).next().trigger('click');
        });
    })
</script>

或者阻止冒泡：（应该能行的通的，谁来帮想代码。。。）

谁来帮想代码。。。

 

举一反三：1.见 Maximum call stack size exceeded  考虑是否出现死循环；

　　　　　2.时刻警惕事件冒泡。