(jQuery)フォーカスが外れた処理に例外を設けたい場合

【実験ページ】
http://www.usamimi.info/~sutara/sample/jq_focus.html


テキストボックスにフォーカスされると、入力の際のヒントが表示されます。
その状態からフォーカスが外れたらヒントは非表示になりますが、ヒント自体がクリックされたのなら例外として表示し続けたいという場合。


下記のように、最終的にはhtmlのイベントハンドラで隠すかどうかの判断をします。
自己をクリックした場合は、変数の値が変更され、それがhtmlのイベントハンドラでの判断に活かされます。


$('article').each(function() {
var sect = this;
var flag = false;
$(sect).children('div, input').mousedown(function(e) { flag = true });
$('html').mousedown(function(e) {
if (flag) flag = false;
else $(sect).children('div').hide();
});
});



古い記事


一番簡単な設定は、『htmlにヒント非表示のイベントを設定するけど、テキストボックスとヒント自体がクリックされた場合のみ、htmlへのバブリングを中止させる』ことだと気が付きました。


<input type="text">
<div>
テキスト入力の際のヒント
</div>

$('input').focus(function(e) { $('div').show() });
$('html').mousedown(function(e) { $('div').hide() });
$('div, input').mousedown(function(e) { e.stopPropagation() });