Question

这个问题已被多次询问，但是没有一个答案似乎对我有用。我想在点击链接时显示div 然后点击它外面，div隐藏

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

在点击外部时单击并隐藏显示div

1 个答案: