那些JavaScript的细节问题(1)

JS写的多了以后,日常也就会遇到各种各样扯淡的问题。这些问题往往只是无关紧要的细枝末节,但偶尔有时候,也会给我们造成一些困扰。于是,我打算不时的拿出一些这类问题讨论和记录,这样,需要答案的人可以找到。没事看看的朋友,也可以当作消遣:)

鉴于这类问题浏览器相关性很强,所以每次我都有必要说明测试环境,我把它们写在最后,当我讨论这些问题的时候,都默认限制在这个测试环境之内。

1. alert() 内容为空时,出现什么?

先来一个比较简单的。如果你未曾尝试,想象一下,直接无参数调用 alert() 会跳出什么?

Chrome 和 Safari 弹出内容是 "undefined" 的窗口,Opera 与 IE 都弹出空内容。前两者似乎都还能够理解,但 Firefox 很奇怪,它完全无动于衷——连个弹出框都没有,Firefox 对空调用的 alert() 不会有反应。

没事拿这个测5个浏览器的人恐怕不多...正因为如果你拿着Firefox在调试某段代码,并且偷懒地在代码里加这么个空调用,那么之后的窘迫就足以让你把这个语句在所有浏览器里测试一遍了。

2. 边框是否是元素的一部分?

是,这不是理所当然的么~ 这个问题的本质其实是,为什么边框响应鼠标事件,但是margin却不会?

好吧,我不得不承认,即使换一个问法,结果仍然是理所当然的。所有的JS的事件描述都仅仅限制到元素,所以说,既然边框响应了事件,那么结论就是,边框就是元素的一部分。但是为什么?

真正难回答的是,如何在标准里找到相关描述。边框是元素最后的边界线,其之外的 outlinemargin 以及 box-shadow,无论是否影响布局,都已无法称之为元素本身。也正因为此,我们能用透明边框处理一些有趣的东西,因为其虽然透明,却仍是边框,仍是元素。

3. click 先触发还是 blur 先触发?

这一期的最后一个问题,当鼠标点击使得焦点从一个 input 上移除的时候,是 click 先触发还是 blur 先触发?毫无疑问,是 blur 先。原因很简单,click的完成是在鼠标按键弹起时候的事了,按下到弹起已经是足够长的时间,blur自然是要快。所以这个问题这么问是不对的。

真正的问法是:mousedown 先触发还是 blur 先触发?

这样问的话,就容易让思路陷入混乱。4年前,在我还是个非常非常菜的菜鸟的时候,在应聘前端实习生的时候遇到了这个问题,当时我想了一下,回答“mousedown 先触发”。然后面试官告诉我,说“应该是blur 先触发”,他举了个比喻:你还没有离开这间房间(意指blur),如何能在外面站立?他让我回去自己试一试。

之后我其实没有尝试,因为那之后并没有走前端这条路,而是成了一名 linux 的 SA,之后一年又在服务器架构/网页设计/邮件/代码管理/PHP/Flash/Ruby等多个领域流亡,渐渐也就忘了这个问题。直到去阿里工作重拾前端的职位,才想起还有这么一个心结的问题。

直到现在,我仍然坚持自己当时的选择,mousedown 先触发,没有鼠标在外部点击的事件在先,input 何以知道要 blur?然而,IE 与 Firefox 的确是 blur 触发在先,只是并非所有浏览器都是这么理解的。其实除了IE 和 Firefox 外,其他浏览器都是 mousedown 触发在前,我很高兴地看到,自己当年的回答也并非完全是错的。只是当年还没有 Chrome,而 Opera 也太边缘化。可见,在这个问题上,其实并没有定论。感谢一楼评论(换用Ghost之后所有的评论都丢弃了)的这位朋友帮忙做了最新浏览器的测试补全,可见现代浏览器的表现是一致的,mousedown 都触发在前,IE也不例外。

这次的问题就到这里了,下次再凑些出来。然后,也打算弄个CSS的系列出来,不过没打算再去写那些该死的Hack,而是着眼于现代浏览器,着眼于那些难以在标准里找到根据的细节。

测试环境:

  • OS: WinXP
  • Browser: Chrome-21,Firefox-12,Opera-12.01,IE-8,Safari-5.1.7

评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。