Javascript hack

以下是工作中实际遇到的问题,供也遇到的同学参考。

1、扩展IE下数组的indexOf方法

对数组的indexOf是一个基本操作,但IE却不支持。需要使用时,可以用以下代码增加此方法

if (!Array.indexOf) {
    Array.prototype.indexOf = function(obj) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == obj) {
                return i;
            }
        }
        return -1;
    }
} 

2、用jQuery实现的IE下拉菜单不停的闪烁

问题代码如下:

main.mouseover(function() {
	//dosomething...
});
main.mouseout(function() {
	//dosomething...
});
问题解析:在mouseover时显示菜单,在mouseout时隐藏菜单,在Firefox, chrome下都没有问题。但在IE下会不停的闪烁。

原因是子元素的mouseover/mouseout会向上冒泡给父元素。而mouseenter/mouseleave不会向上冒泡,所以使用mouseenter/mouseleave替代即可解决此问题。


3、IE下  jQuery 的change事件第二次才能触发的bug

问题:对一个input[text]绑定jQuery的change事件,在Firefox, chrome中都运行正常。

IE下,页面第一次载入后, 在input[text]输入内容,切换到另一个输入框,此时不会触发change事件。 当第二次在input[text]输入内容,离开后才会触发。

解决方案,使用IE自己的onpropertychange事件替代

if ($.browser.msie) {
	$("#phone").get(0).attachEvent("onpropertychange", CheckPhoneAndShowTips);
} else {
	$("#phone").change(CheckPhoneAndShowTips);
}

4、chrome不支持onunload事件

想做一个页面访问统计功能,在页面关闭时,上报在该页面的停留时间。
window.onunload = function() {    myWebCounter.LeaveCount();    }
在ie, firefox中都有效,但chrome浏览器无效。
在chrome中单步调试,发现会调用onunload中的函数,但函数体中的语句并不会真正执行,比较alert、$.ajax等。
猜想chrome这样设计是为了加快访问速度,对终端用户来说是好事,因为页面都要关闭了,丢弃掉onunload函数不会影响用户体验。
 
不过,对于开发都来说就有些郁闷了。
类似的问题还有 onbeforeunload也不支持。
网上对此问题的表述不一: http://w3help.org/zh-cn/causes/BX2047


版权声明:本文为ewolfyu原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。