『mousedown > blur > click』の検証 (jQuery)

プログラミング

要するに

下記を見てもらえれば、わかります。

(検証用サンプル)
http://www.usamimi.info/~sutara/sample/for_question.php


経緯

キテるタグで、普段は省スペースだけど、フォーカスされたら
領域が広がるテキストエリアを設置したくなり、作ってみました。
フォーカスされれば行数が8に、
他にフォーカスが移れば行数が2になります。


【jQuery】

$('#textarea1')

	.focus(function(){ $(this).attr('rows', 8) })

	.blur (function(){ $(this).attr('rows', 2) });
が、しかし問題が。
テキストエリアの下に送信ボタンを設置しているため、
マウスクリックで送信しようとするとclickよりもblurが優先される(※1)ため、
まずテキストエリアの収縮が始まり、それにつられて送信ボタンの位置もズレます。
そして、わずかに遅れてclickが実行されるのですが、
ボタンよりも遙か下をクリックしたと認識され、
送信処理が行われません。


※1 【参考】
http://www.usamimi.info/~sutara/sample/jq_event_priority.php


対症療法として、テキストエリアの収縮を『setTimeout()』で
遅らせれば解決します。
しかし、そんなスマートじゃないやり方では我慢できないため、
Yahoo!知恵袋で質問しました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1076953090


回答者の方が触れていた『focusin、focusout』という、
僕の頭の中にはなかった検索ワードを得たことで調査の幅が広がり、
いろんなことを発見しました。

jQuery1.4から、focusin(), focusout()が追加された。
主に1.2系でjQueryを学んだ僕には、知らないメソッドでした。
focus, blurではできない、『バブリングしたイベントも捕捉する』ことができます。
http://stacktrace.jp/jquery/api/events/focusout(fn).html
relatedTargetが得られるのは、マウス系のイベントのみ
blurでは得られない、とわかっただけでも収穫でした…(^ ^;)

そんなこんなで試行錯誤を続ける中で『mouseout > blur』なら
すべて解決するんじゃないかと予想し、試してみたらそのとおりでした。



$('#submit_button')

	.click(sendTweet)

	.mousedown(sendTweet);

	

function sendTweet(){

	...
『.click()』も、Tabキー+Enterキーで送信されたときのために必要です。