2

このコードで、blur() の jQuery セレクターとして使用されている div をクリックすると、それが非表示になるのはなぜですか? Blur() は、その外側をクリックした場合にのみ非表示にする必要があります。

HTML トリガー:

<div class="header">To-Do <a class="triggernewtodo">Add a task...</a></div>

表示/非表示:

<li class="addnewtodo">
<form>
    <textarea class="addtodotextarea"></textarea>
    <div class="controlarea">
    <input class="primary" name="commit" type="submit" value="Add" />
    </div>
</form>
</li>

jQuery:

// Show/Hide New Todo form
$('a.triggernewtodo').click(function() {
    $('li.addnewtodo').show()
    $('textarea.addtodotextarea').focus();
});

$('li.addnewtodo').live("blur", function() {
    $(this).hide();
})

私の推測では、テキストエリアに配置された .focus() と関係があると思います。その .focus() を取り出すと、テキストエリア内をクリックしてからクリックするまで (まだリスト項目内にある) 正しく動作するためです。リスト項目全体を非表示にします。何か案は？私は何を間違っていますか？

4

1 に答える 1

1

その LI 内から「バブルアップ」したイベントを見ているのではないかと思います。基本的に、たとえば INPUT からの「blur」イベントは、その入力のすべての「blur」ハンドラをトリガーします。 次に、フォームのすべての「ぼかし」ハンドラーをトリガーします。次に、LI で「ぼかし」ハンドラーをトリガーし、非表示にします。

これを防ぐためにstopPropagationを呼び出さない限り、イベントは DOM ツリーのずっと上まで続きます。あなたの場合、event.targetプロパティを使用して、イベントが実際に LI で発生したかどうかを確認し、その状況でのみ非表示にすることができるはずです (警告: 未テスト):

$('li.addnewtodo').live("blur", function(event) {
    if(event.target == this)
    {
        $(this).hide();
    }
});

それが役立つことを願っています!

PS:追加の注意事項については、ぼかしイベントのページを参照してください。

于 2012-12-05T20:55:28.503 に答える