点击按钮出现弹窗，弹窗只是闪现了一下，为什么没有一直出现？

Question

点击第二个a,实现登录。现在弹窗只是闪现了一下，然后就消失了。求大神帮忙解决

<div class="metin-info text-center">
    <a href="">
        <span class="fa fa-qq fa-3x"></span> <b class="sidebox">QQ客服</b>
    </a>
    <a href=""  id="s1">
        <span class="fa fa-user fa-3x"></span> <b class="sidebox">登陆/注册</b>
    </a>
    <a href="">
        <span class="fa fa-commenting fa-3x"></span><b class="sidebox">在线咨询</b>
    </a>
    <a href="" class="goTop">
        <span class="fa fa-chevron-circle-up fa-3x"></span>
    </a>
</div>

css

 .metin-info{
    position:fixed;
 }
 .metin-info a{
    display: block;
    position: relative;
}
    

js逻辑

    $(".metin-info a:nth-child(2)").click(function(e){
          var target= e.target;
          console.log(target);
          console.log(this);
          $(".lg-container").show();
    });
    

图片

Answer 1

$(".metin-info a:nth-child(2)").click(function(e){

    e.preventDefault();
    var target= e.target;
    console.log(target);
    console.log(this);
    $(".lg-container").show();
});

Answer 2

click事件里加一句e.stopPropagation(); 阻住a的默认事件

Answer 3

`$("#s1").click(

  function(e){
        e.preventDefault();
        $('.lg-container').show();
  }

);`

Answer 4

1. a标签href里面加javascript:void(0); 阻止点击a的默认事件。

2. click方法里面加e.stopPropagation()阻止事件冒泡。
   因为点击a时，弹窗出现，事件冒泡，触发了关闭弹窗的事件。