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

 

posted @ 2016-12-17 20:06  鑫鑫点灯  阅读(142582)  评论(1编辑  收藏  举报