Событие Javascript stopPropagation для разных типов событий

Question

У меня есть тег, и когда «сфокусировано», я отображаю. Когда я нажимаю на тело документа, я бы хотел, чтобы это закрылось. Однако это не работает при использовании двух разных типов событий:

<input id='input' />  
<div id='div style='display:none;'>
</div>

$('#input').focus( function(e){  
   e.stopPropagation();  
   $('#div').show()  
});

$(document).click( function(){  
   $('#div').hide();  
});

Похоже, что e.stopPropagation() только останавливает распространение события onfocus. Поскольку, когда я переключаю код на: $('#input').click(), то он работает нормально.

Просто любопытно, есть ли способ заставить эту работу работать с приведенным выше кодом? (хотел бы узнать JS немного лучше)

Спасибо!

Answer 1

Вы можете просто сделать это

$('#input').bind('focus blur', function() {
    $('#div').toggle();
})

Проверить рабочий пример на http://jsfiddle.net/u9xwb/

Answer 2

Вы правы, это убивает только событие, на которое вы подписаны, вам нужно также остановить событие click на входе.

$('#input').focus( function(e){  
   e.stopPropagation();  
   $('#div').show();
}).click( function(e){  
   e.stopPropagation();
});

$(document).click( function(){  
   $('#div').hide();  
});