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

フォーカスが機能しない：http DIV：//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

このソリューションが Web ページに適しているかどうかはわかりませんが、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
});