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 specification：

焦点

当元素通过指点设备或通过时获得焦点时，会发生焦点事件标签导航。此事件对以下元素有效：LABEL，INPUT，SELECT， TEXTAREA和BUTTON。

模糊

当元素通过指点设备失去焦点时，会发生模糊事件标签导航。此事件对以下元素有效：LABEL，INPUT，SELECT， TEXTAREA和BUTTON。

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

This SO question提到给tabindex元素允许这样做，并且在modifying your jsFiddle之后似乎在Chrome中对我有效。（尽管有一个相当难看的轮廓。）

Answer 2

据我所知，模糊发生在具有焦点的输入上，无论你怎么说

我希望当我点击不是div的任何地方时会触发模糊事件......对吗？

不完全是，模糊事件仅发生在首先聚焦

的元素上

因此，为了发生模糊事件，您首先必须将焦点放在div上，div如何首先获得焦点？

如果您确实尝试确定div之外是否有点击，则需要在文档中附加一个点击处理程序，然后检查点击的来源。

var div_id = "#my_div";
var outsideDivClick = function (event) {
  var target = event.target || event.srcElement;
  var box = jQuery(div_id);

  do {
    if (box[0] == target) {
      // Click occured inside the box, do nothing.
      return;
    }
    target = target.parentNode;
  } while (target);   
}
jQuery(document).click(outsideDivClick);

请记住，只需点击页面即可运行此处理程序。（在过去，如果我要使用这样的东西，我会在需要时附加处理程序，并在我不再需要时将其删除）

Answer 3

A不能“模糊”，因为这会让div首先关注焦点。像a和textarea这样的非输入元素可以有焦点，这是jQuery的文档所指的。

你需要的是“mouseout”或“mouseleave”事件（mouseleave没有冒泡，mouseout会这样做），当光标离开div时会被触发。如果您需要点击，我会将“点击”事件附加到正文，以及div并仅在div上停止事件传播：

$("div").click(function(e) {
    return false; // stop propagation
});

或者，如果您确实确定了，您可以使用一些CSS规则伪造div的外观：）

Answer 4

如果您希望在将鼠标移到框上时发生某些事情，则可以使用mouseover事件。

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

4 个答案:

焦点

模糊