javascript - 是否可以使用 JS 或 jQuery 为 DIV 编写 onFocus/lostFocus 处理程序？

Question

我有一个 div，当用户单击 div 时，应该调用一个函数。当用户点击其他东西（除了这个 div 之外的任何东西）时，应该调用另一个函数。

所以基本上我需要有与这个 DIV 关联的 onFocus() 和 lostFocus() 函数调用。它在 JavaScript 甚至 jQuery 中可用吗？

谢谢。

Answer 1

您需要将tabindex属性添加到div：

$("#mydiv").focusin(function() {
  $("#mydiv").css("background", "red");
});
$("#mydiv").focusout(function() {
  $("#mydiv").css("background", "white");
});

#mydiv {
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv" tabindex="100"></div>
<div id="anotherdiv"></div>

Answer 2

焦点不起作用DIV：http ://api.jquery.com/focus/

另请阅读：jquery：对 div 的关注不起作用

If you want to focus a div or anything normally can't be focused, set the tag's tabindex to -1 first.
eg: $("div#header").attr("tabindex",-1).focus();

Answer 3

不确定此解决方案是否适合您的网页，但您可以使用 JQuery on() 将点击事件附加到 body 元素并将其委托给子 div。然后在您的事件处理程序中，测试 id 属性并按此处理；就像是：

$(body).on("click", "div", function (evt) {
     if ($(this).attr("id") == "innerDiv") {
            handle inner div click here
     } else {
            hanlde out div click here
     {
}

希望这可以帮助...

Answer 4

当然。

$("#your-div-id").focusin(function() {
    // code here
});

$("#your-div-id").focusout(function() {
    // code here
});