顯示div一旦點擊就隱藏點擊外部

Question

此問題已被多次詢問，但是沒有一個答案似乎適用於我。 我想股利是顯示當點擊該鏈接 上，然後點擊它之外，DIV隱藏

my code

HTML：

<a href="#" id='link'>Click here to show div</a> 

JS：

$('#link').click(function(e) { 
    $('div.termifier').remove(); 
    $('<div>').addClass('termifier').css({ 
     position: 'absolute', 
     top: event.pageY , 
     left: event.pageX , 
     display: 'none' 
     }).appendTo('body') 
    .append(
     $('<div>').html("termifier") 
    ); 
    $('div.termifier').fadeIn('slow'); 
}); 

$('html').click(function() { 
    $('div.termifier').fadeOut(); 
}); 

$('div.termifier').click(function(e){ 
    e.stopPropagation(); 
}); 

CSS

div.termifier { 
    background-color: cornsilk; 
    width: 256px; 
    color: brown; 
    padding: 8px; 
    font-size: 0.8em; 
} 

Answer 1

使用e.stopPropagation()

$('#link').click(function(e) { 
    e.stopPropagation(); 
    /* Rest of the code for clicking */ 
}); 

DEMO

如果你想防止褪色當您單擊DIV藏漢，這樣做：

$(document.body).bind('click','.termifier',function(e){ 
    e.stopPropagation(); 
}); 

你可以，如果你使用.on()代替.bind()將使用比1.6.4更新版本的jQuery

DEMO