单击后显示 div，单击外部时隐藏

Question

这个问题已被多次询问，但似乎没有一个答案对我有用。 我希望在单击链接时显示 div 然后点击它外面，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();
 });

如果您要使用比 1.6.4 更新的 jQuery 版本，您可以使用 .on() 而不是 .bind()

DEMO