Что случилось с моим телом?

Question

У меня есть, что текстовое поле:

<input type='text' id='title' name='title'> 
<div id='error' class='error'></div> 

Когда пользователь щелкает из текстового поля и возникает проблема проверки, появляется ДИВ «ошибка».

Что я хочу сделать, так это скрыть этот маленький div при щелчке пользователем в любом месте тела. Я пробовал e.stopPropagation в событии щелчка тела, но не работал.

ДИВ никогда не появляется, потому что, когда я размываю из текстового поля, это считается телом нажмите

Пожалуйста, дайте мне знать, если у вас есть какие-либо идеи. С уважением

EDIT: Я обновил код. Предполагается, что код внутри события щелчка тела скроет div «error», когда ничего, кроме текстового поля, не нажата, но не может заставить его работать.

$('body').click(function(event){ 
     if ($(event.target).closest('#title').get(0) == null) { 
      $("#error").hide(); 
      }}); 

// Validation 
$('#title').blur(function(){ 
    var titleinput=$('#title').val(); 
    if (titleinput.length <30 || titleinput.length >50){ 
     $('#error').text('Your title must be between 30 and 50 characters').show(); 
     } 
    }); 

Answer 1

К сожалению, так как blur и click различные события, вы не можете использовать stopPropagation. Единственный способ, которым я могу думать, это подделать его. Вы можете игнорировать первый щелчок, который происходит за долю секунды от события blur.

http://jsfiddle.net/LeNDp/1

var ignoreClicks = false; 
var timer; 

$("body").click(function() { 
    if(!ignoreClicks){ 
     $("#msg").fadeOut(); 
    }else{ 
     if(timer) clearTimeout(timer); 
     ignoreClicks = false;   
    } 
}); 

$("input").blur(function(e) { 
    ignoreClicks = true;  
    $("#msg").stop(true,true).show(); 

    if(timer) clearTimeout(timer); 
    timer = setTimeout(function(){ignoreClicks=false;}, 250); 
});​