[分享]IE7下propertychange事件引发的栈溢出问题解决

Question

与之相关的链接:http://blog.csdn.net/lgg201/archive/2010/05/28/5630392.aspxhttp://blog.csdn.net/lgg201/archive/2010/05/28/5629526.aspx
   1. $('#diary_title').bind('keydown', function(event) {  
   2.     if($(this).val().len() >= 50) $(this).attr('maxLength', $(this).val().length);  
   3. }).bind('input', function(event) {  
   4.     $(this).val($(this).val().chinesesubstr(0, 50));  
   5. }).bind('propertychange', function(event) {  
   6.     $(this).val($(this).val().chinesesubstr(0, 50));  
   7. });  
对字符串扩展, 并使用了上面代码做了input的长度限制之后, 运行一直良好, 直到今天测试提到IE7下输入框键一直按下输入导致的Stack overflow at line xxx的错误...
本来以为是自己些的截取字符串方法造成的溢出, 结果不是, 不过所幸找到一个原来字符串截取的bug, 以下是修正后的汉字截取
/**
 * 扩展了String的chinesesubstr方法, 用于非ascii的字符截取
 * @param {} begin 开始字符数
 * @param {} num 截取的字符数
 * @return {}
 */
String.prototype.chinesesubstr = (function(begin, num) {
var ascRegexp = /[^\x00-\xFF]/g, i = 0;
var chs = this.toCharArray();
while(i++ < begin) (ascRegexp.test(this.charAt(i)) && begin --);
i = begin;
var end = begin + num;
while(i++ < end && i < this.length) (ascRegexp.test(this.charAt(i)) && end --);
return this.substring(begin, end);
});
万般无奈, 看到IE7响应的是propertychange事件, 就在该事件中增加了alert, 发现的问题是, 输入或点击等操作, 只要稍微碰触到该元素, 就会导致多次alert, 我们知道, 其实alert是modal的, 也就是它弹出来之后, 我们对浏览器是无法操作的, 因此, 就猜测propertychange在IE7是异步响应的, 因此, 在propertychange事件的处理中把多余的调用屏蔽了(propertychange对我来说, 不需要那么频繁的响应, 一个输入动作一次足以), 如下:$('.selector').bind('input', function(event) {
if($.syncProcessSign) return ;
$.syncProcessSign = true;
if($(this).val().len() >= 60) $(this).val($(this).val().chinesesubstr(0, 60));
$.syncProcessSign = false;
}).bind('propertychange', function(event) {
if($.syncProcessSign) return ;
$.syncProcessSign = true;
if($(this).val().len() >= 60) $(this).val($(this).val().chinesesubstr(0, 60));
$.syncProcessSign = false;
})增加一个全局的同步信号, 如果正在处理, 就直接返回.....果然, 问题解决了......
依然疑惑的是IE7中, propertychange事件的响应究竟是因为异步还是因为bug导致一个动作引发多次响应.期待高手解答中.

Answer 1

propertychange会相应多次
你看一下就明白，只要HTML的改变就会触发该事件多次
event.propertyName
比如改变SELECT的 value
就会触发两次
event.propertyName分别为selectedIndex和 value

Answer 2

是不是propertychange事件在控件的任何属性(包括内部属性)发生改变时都会触发??
我是在input[type=text]上绑的这个事件, 在点击inpu的时候, 也会触发两次

Answer 3

text只会触发一次，propertyName为value,而且点击也不会触发

Answer 4

搂住最好自己 调一下，看每次进去的propertyName吧

Answer 5

我点击确实是触发了的, 用firebug跟踪的....

Answer 6

是的，任何属性的改变都会触发该事件
包括设置它自己的时候document.getElementById(id).onpropertychange = function(){
alert("onpropertychange");
}
上面这句是绑定事件，而此时也同时触发了该事件

Answer 7

你的FF是什么版本我在 FF和Chrome下均不会相应onpropertychange，如果真的相应了多次，自己看下event对象的propertyName不就都明白了

Answer 8

楼主的代码逻辑有问题，propertychange事件捕捉任何属性改变，你的所有赋值操作都会激发

Answer 9

单击输入框代表focus属性的值设置为true，当然会触发propertychange事件，而改变text的值代表value属性值被改变又一次触发了propertychange事件，懂了没？

Answer 10

所以不要动不动怀疑浏览器，微软的那些东西再垃圾那些bug也是世界有名的黑客找出来的

Answer 11

没有明白过来代码逻辑问题出在哪里.....可以说明吗???不然看这帖的岂不都被我误导了...另外, 如果不使用propertychange, 在IE7下怎么做这个需求? change肯定不可以, input又貌似不支持...Thank in advance.

Answer 12

keyup的问题在于用户按住按键不松开会出好多， 这个时候如果再截会有闪烁, 我家测试专测这种东西