web-dev-qa-db-ja.com

JSまたはjQueryを使用してDIVのonFocus / lostFocusハンドラーを作成することは可能ですか？

私はdivを持っており、ユーザーがdivをクリックすると、関数が呼び出されます。また、ユーザーが他の何か（このdiv以外）をクリックすると、別の関数を呼び出す必要があります。

したがって、基本的に、このDIVに関連付けられたonFocus（）およびlostFocus（）関数呼び出しが必要です。 JavaScriptまたはjQueryでも利用できますか？

ありがとう。

javascriptjqueryonfocuslost-focus
8
phoenix

ここで私はあなたが欲しいものの実用的なデモを作成しました http://jsfiddle.net/kPbfL/1/

tabindex属性をdivに追加する必要があります。

マークアップ：

 <div id="mydiv" tabindex="-1"></div>

Javascript

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

[〜＃〜] css [〜＃〜]

#mydiv{
width : 50px;
    height:50px;
    border : 1px solid red;
}​
​
22
Mohammad Adil

フォーカスが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();
6
Tats_innit

このソリューションが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
     {
}

お役に立てれば...

0
Uncle