前段事件做项目,在IE下测试时,发现会报堆栈溢出的错误,其他浏览器正常,于是开始了苦逼的IE查错路程。。。
由于是在操作了某个输入框之后才出现的错误,所以把重点放到了input的相关事件,最终发现是这行代码导致:
$("#school").on("input propertychange",function () { var t = $(this); t.removeAttr("data-schoolid");})
一开始还没有领会过来,监控输入框的输入,怎么就导致堆栈溢出了,只到深入了解了input和propertychange事件。
input:HTML5标准事件,输入框文本监听;
propertychange:IE专属事件,顾名思义,属性改变事件,任何一个HTML属性改变都会触发,没错,问题就出在这里,在属性改变事件里面又改变了另一个属性(去掉data-schoolid属性),导致事情触发陷入死循环引发堆栈溢出!
解决:引入一个隐藏域,<input type="hidden" id="schoolData" />,在用户输入的时候动态改变隐藏域的属性值,而非输入框本身属性值,轻松解决!
反思:一般代码出现这种bug,无非这几种情况:1、思路不清晰,2、基础不扎实,3、考虑不周全,而这个错误的出现明显就是因为基础不扎实,在用到某个API的时候,要尽量多了解,知其然也要知其所以然!