jQuery模糊处理程序不工作div元素？

Question

我不明白为什么jQuery模糊处理程序在最简单的情况下不起作用.我实际上创建一个div 100px×100px并在其上设置模糊事件,但它没有触发(JSFiddle):

<div id="test">this is a test</div>

$(document).ready(function() {
    $('#test').bind('blur', function() {
          alert('blur event!'); 
    });
});

我对模糊的理解是错误的吗？当我点击不是div的任何地方时,我希望模糊事件能够触发......对吗？

根据jQuery的文档:

在最近的浏览器中,事件的域已扩展为包括所有元素类型.元素可能会通过键盘命令(例如Tab键)或通过鼠标单击页面上的其他位置而失去焦点.

我在Mac上的最新Chrome和Firefox上尝试过它.

Answer 1

来自W3C DOM Events规范:

焦点

当元素通过指点设备或通过Tab键导航获得焦点时,会发生焦点事件.此事件对以下元素有效:LABEL,INPUT,SELECT,TEXTAREA和BUTTON.

模糊

当元素通过指点设备或通过Tab键导航失去焦点时,会发生模糊事件.此事件对以下元素有效:LABEL,INPUT,SELECT,TEXTAREA和BUTTON.

jQuery docs状态浏览器将事件扩展到其他元素,我猜这意味着模糊和焦点是更通用的DOMFocusIn和DOMFocusOut事件的别名.默认情况下,非输入元素没有资格接收这些元素,并且元素必须以某种方式在丢失之前获得焦点 - 对于div之外的每次点击,模糊仍然不会触发.

这个问题提到给一个元素一个tabindex允许这个,并且在修改你的jsFiddle之后似乎对我有用.(虽然有一个相当丑陋的轮廓.)