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.時刻警惕事件冒泡。