Blurイベントがクリックイベントの動作を停止させる？

質問

Blur イベントがクリックイベントハンドラーの動作を停止させているように見えますが？私は、テキストフィールドにフォーカスがあるときだけオプションが表示されるコンボボックスを持っています。オプション リンクを選択すると、イベントが発生するはずです。

ここにフィドル例があります。 http://jsfiddle.net/uXq5p/6/

再現するために

1. テキストボックスを選択する
2. リンクが表示される
3. リンクをクリックする
4. ぼかしも発生し、リンクが消える
5. 他には何も起こりません。

期待される動作です。

ステップ5で、ぼかしが発生した後、クリックも発生する必要があります。どうすれば実現できるでしょうか。

UPDATEです。

しばらく遊んでみたところ、blurイベントによってクリックされた要素がUn-clickableになった場合、すでに発生しているclickイベントが処理されないようにするために、誰かがわざわざ工夫をしたようです。

たとえば

$('#ShippingGroupListWrapper').css('left','-20px');

は問題なく動作しますが

$('#ShippingGroupListWrapper').css('left','-2000px');

はクリックイベントを防止します。

これは Firefox のバグと思われます。なぜなら、要素をクリックできないようにすると 未来 がクリックされますが ではなく をクリックすると、すでに発生しているものをキャンセルします。

その他、クリックイベントの処理を妨げるもの。

$('#ShippingGroupListWrapper').css('z-index','-20');
$('#ShippingGroupListWrapper').css('display','none');
$('#ShippingGroupListWrapper').css('visibility','hidden');
$('#ShippingGroupListWrapper').css('opacity','.5');

このサイトでは、同様の問題を抱えている他の質問をいくつか見つけました。2 つのソリューションが出回っているようです。

1. 遅延を使用する。これは、隠蔽とクリックイベントハンドラの間に競合状態を作り出すので、よくありません。また、ずさんでもあります。

2. を使用します。 mousedown イベントを使用します。しかし、これもあまり良い解決策ではありません。 click は であり、リンクのための正しいイベントです。の動作は mousedown の動作は UX の観点から直感に反します。特に、ボタンを離す前にマウスを要素から移動させてクリックをキャンセルすることができないため、このような動作が発生します。

さらにいくつか思いつきます。

3.使用 mouseover と mouseout の上に リンク を使用して、フィールドのブラーイベントを有効/無効にすることができます。マウスが関与しないため、これはキーボードによるタブ操作では機能しません。

4.最良の解決策は、次のようなものでしょう。

$('#ShippingGroup').blur(function()
{
   if($(document.activeElement) == $('.ShippingGroupLinkList'))
      return; // The element that now has focus is a link, do nothing
   $('#ShippingGroupListWrapper').css('display','none'); // hide it.
}

残念ながら $(document.activeElement) は、クリックされた要素ではなく、常に body 要素を返すようです。しかし、1. どの要素が今フォーカスされているか、2. どの要素がぼかしを引き起こしたか (どの要素がぼかしているかではなく) を、ぼかしハンドラ内から知る信頼できる方法があればよいのですが。また、他のイベント ( mousedown のほかに）、ぼかしの前に発生する他のイベントはありますか？

どのように解決するのですか？

click イベントが発生した後に blur の後に発生するので、リンクは隠されます。代わりに click を使う mousedown を使えばうまくいくでしょう。

$('.ShippingGroupLinkList').live("mousedown", function(e) {
    alert('You wont see me if your cursor was in the text box');
});

他の方法としては、リンクを非表示にする前に blur イベントへのリンクを非表示にすることもできます。どちらの方法を取るかはあなた次第です。

デモ