我才12岁 ?

在最近的新淘江湖项目中遇到一个诡异的问题，就是关于onblur和onclick。当时觉得很诡异，后来测试后发现更诡异。所以在此记录一下。

首先提出问题：如果我为一个input添加了一个blur事件，同时为document添加了一个click事件，那么，当input是焦点状态时，我点击其它地方，会触发哪个事件？如果两个都触发了，那么会先触发哪个事件？

按理来说，这两个事件应该都会发生的，但是，在各浏览器下测试的结果很令人不解！~

大家先看一下Demo，点吧点吧试下~

测试结果表格（不包含点击标签栏或者地址栏以及其它到浏览器外时的情况）：

以下测试均在input的focus状态下进行：

浏览器	点击滚动条时是否触发onblur事件？	点击空白处（无任何内容或者点击后也不会出现任何内容的地方），是否先触发onblur事件，后触发onclick事件？	点击有文字的地方，是否触发onclick事件？	点击(点击后点击处将出现文字）的地方，是否触发onclick事件？	点击(点击后将display:none)的地方，是否触发onclick事件？	点击(点击后将visibility:hidden)的地方，是否触发onclick事件？	刷新后是否自动触发blur事件？
IE6	是	是	是	是	是(获取到的target是body)	是(获取到的target是body)	是
IE7	是	是	是	是	是(获取到的target是body)	是(获取到的target是body)	是
IE8	否	是	是	是	是(获取到的target是body)	是(获取到的target是body)	是
Opera 10.10 Beta 1792	否	是	否	是	是(获取到的target是消失的元素)	是(获取到的target是消失的元素)	否
Firefox 3.5.3	否	是	否	否	否	否	否
Chrome 3.0.195.21	是	是	是	否	否	否	否
Safari 4.0.3(531.9.1)	是	是	是	否	否	否	否

尺寸原因，这里的表格可能看着不爽，可以点击这里查看美丽版！~

5、6项的测试是为了看下二者是否会有差异，结果二者是一样的，囧。从测试结果来看，对Firefox特别满意，IE的表现很令人失望，Opera和Webkit引擎的浏览器很怪异，这主要体现在第3、5、6项上~

标签： onblur, onclick

这篇文章发布于 2009年09月23日，星期三，16:23，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。