标签归档:BUG

jquery触发两次onchange事件

因为项目中需要校验信息,又不想给服务器带来较大负荷,就使用onchange来实现校验。使用jquery绑定change事件,如下面的代码:


<script type="text/javascript">
        $(document).ready(function()
        {
            $('#test1').bind("change", function()
            {
                alert(this.value);
                this.value = this.value+"aa";
            });
        });

</script>
<input id="test1" type="text" />

演示地址:http://runjs.cn/detail/1r4wltof

测试环境

目前仅在IE8下发现此类问题,我仅测试了IE8/Chrome25/Firefox19

原因分析

google了下,有人将此问题归类为jqueryBUG,存在于1.4 – 1.6.4.版本,详见原帖内容
个人认为,在操作中js改变了input的内容,导致再次触发change事件。那么再次处罚了change事件后,内容也发生了改变,理论上应该进入死循环,但实际上只触发了2次。另外我也尝试了直接给input添加onchange属性来触发,开始时,也是触发了2次,但不知道改变了什么,后来仅触发了1次。

解决方法

我尝试了先解绑,再绑定的方法。注,#test1的方法是正确的,#test2的方法则是没实现的,作对比。setTimeout的方法来自这里.

$(document).ready(function(){
	$('#test1').bind("change", function(){
		var thatFun=arguments.callee;
		var that=this;

		$(this).unbind("change",thatFun);

		//you can do something here
		alert(this.value);
		this.value=this.value+"aa";

		//rebind again
		setTimeout(function(){$(that).bind("change",thatFun)},0);//why use setTimeout? sorry, I don't know...
	});

	//without setTimeout, it will not work. just like this.
	$('#test2').bind("change", function(){
		$(this).unbind("change",arguments.callee);
		alert(this.value);
		this.value=this.value+"aa";
		$(this).bind("change",arguments.callee);
	});
});

奇怪的浮动Float

在百度知道搜资料的时候看到一个网友问了关于CSS浮动的问题,问题地址在这里,直接看代码:

<body>
<div style="background:red; height:100px; width:200px; float:left;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

看了上面代码很简单,相信从理论上你也应该看出会是什么样的一个显示方式。但问题就在于你没想到的地方。看下面的效果:

111111111111111
222222222222222

再试试不同的浏览器,我使用的IE和Chrome,可以明显的看出两者的不同之处。为了更明显的看出区别在哪,你可以本地新建一个文档,贴入下面的代码:

<body>
<div style="background:red; height:100px; width:200px; float:right;">111111111111111</div>
<div style="background:grey; height:100px; width:200px;">222222222222222</div>
</body>

然后收到缩小浏览器窗口的宽度,看看两者是怎么个float方式。

之前也没遇见过,当然也可以为第二个div加个float就能解决,但问题在于我没想清楚这样的不兼容到底怎么去解释。不过从理论上IE的渲染结果比较符合我的理解,Chrome的结果有点让我出乎意料。

请问各位高手,如此问题你如何解释?

偌大个互联网竟放不下一个安全的密码

CSDN,天涯社区密码被盗现在已经闹的沸沸扬扬,不禁让人想说,偌大个互联网竟放不下一个“安全”的密码,这不是坑爹嘛。

CSDN是国内非常牛的程序员社区,也是jucelin上学和现在经常光顾的社区之一,里面的牛人很多也很热情,结果就这样一个搞IT的社区却被IT给搞了,还使用原始的明文保存方式,明文吧也能理解,但保存也能忘记使用加密方式?我相信CSDN的程序员不会这么粗心大意的,那么到底是什么原因导致的,相信很多人和我一样都在期待最后的结果。在结果没出来值钱,我们也来猜猜。

朋友讨论时猜测了几种情况,发出来大家也讨论下:

1. 确实的工作人员的疏忽,导致帐号泄漏。那么CSDN的企业文化,工作流程估计需要重新刷新了,不,应该是重构。这个不解释。

2. CSDN自己出售给第三方,后因第三方的原因导致泄漏。那得替CSDN诉苦了,咱都卖出去了,哪还能hold住啊。用户帐号再值钱(这个还真值钱),那也得找个能hold住的买主啊!!

3. 内部员工自己出售的。那么估计最后的解释可能是,他是无证程序员,而且还是实习生,行为与公司无关,至于你信不信,反正我信了。

4. G·O·V实名制的要求,密码明文保存,并上交,结果还是从G·O·V里面泄漏出来了。这个咱就解释不了了。CSDN都被要求了,QQ,微博,那不是都是明文保存,并上交?原来G·O·V能很快查出来你在那些论坛说了那些话就是这个原因啊。别以为你宅在家里,黑灯瞎火的“我们”就看不见你。

5. 炒作。某杀毒软件商在扫描用户信息的时候扫到了该包,收集,发布,还好心提醒,这种一夜成名的事,多少能让公司挽回点正面形象。当然这种可能性不大,就针对这次事件来说。

当然上面的讨论也是纯属无稽之谈,仅供娱乐,因为上面的很多是永远得不到证明的,就想“砖家”在电视上评论各国的军事一样,你猜我猜大家猜,反正又证实不了。

现在又有很多“砖家”出来提醒用户使用高强度的密码,还建议不要使用同一个密码,我注册过上百个网站,使用不同的密码,就意味着我的建个文档几下我的密码,而且还得网络存储,那还不是一个样嘛。要是本地保存,再来个360服务器被google收录,可以搜索到密码这样的事,结果还是一个样。要我说,该咋样还是咋样,分几个级别的密码,应该基本上满足需求了,和钱有关的以及密保邮箱有关的,使用独有密码,那些使用QQ邮箱作为密保邮箱的该自个提醒提醒自己了。

另外,“听说”被盗的600万账户是CSDN2009年的数据库,这么说来,这600万帐号包含了很多CSDN核心用户的帐号,某些程序员的账户应当相当“值钱”,在加上很多网友的上网密码都是一号通,难怪卖上几百万也不为过呢。

IE BUG:内联的图片超链接失效

BUG描述下先:在标签<a>下加入<span>和<img>标签,并将<a>和<span>标签定义为display:block,设定大小,测试发现鼠标放在图片是不会显示手型,图片的链接也“失效”了(其实未失效,下面解释),点击没有任何效果,但点击<a>标签的空白位置,链接依然有效。

适用平台

IE6-8下出现,IE9未测试,Chrome正常。

BUG重现

下面是专门写的一个测试页面,有兴趣的可以测试下。

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE BUG:内联的图片超链接失效 - Design by jucelin.com</title>

<style>

.test-a{display:block; width:100px; height:100px; background:#eee;}

.test-a .test-img{display:block; width:50px; height:50px; background:yellow;}

.test-a .test-title{display:block;}

</style>

</head><body>

<div>

<a href="https://jucelin.com" target="_blank">

<span><img src="Images/form.png" border="0" /></span>

<span>jucelin.com</span>

</a>

</div>

<div>

<a href="https://jucelin.com" target="_blank" class="test-a">

<span class="test-img"><img src="Images/form.png" border="0" /></span>

</a>

</div>

</body></html>

下面是测试的截图(图片丢失):

图中的鼠标应该是正常的鼠标,单截图没办法截下鼠标的样式,就随便找了个样式演示下。

从测试可以看出来,图片的链接实际上仍然存在的,鼠标放上去之后在IE的状态栏中显示了链接的地址,但单击时,则链接无法相应。jucelin也解释不了这其中的原因,只能记下来自己以后注意下。

解决办法

BUG 就找个Hack的方法补补,将img所在的span添加position:relative; z-index:-1;样式,就是将span的层级放到a的下方,此时的要求是a不能有背景色,否则img就看不到了。另外使用JS也可以很好的解决。

相关文档

IE6,7中, 图片导致超链接失效的bug:http://blog.163.com/thinker_creator/blog/static/101933149200941994831531/