單擊時彈出的窗口重復

Question

我有這個JS：

  $(document).ready(function() {
       $("ul.social").hide();
       $("span.link").each(function(i){
         $(this).mouseover(function(){
           $("ul.social").eq(i).show("fast", function(){
             $("ul.social li a").click(function(){
               var link = this.href;
               window.open(link, " ", "height=350,width=600");
             });
           });
         });
       });
     });

和這個HTML：

<ul class="social">
    <li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no LinkedIn" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/in.png" alt="" width="24" /></a></li>
    <li><a href="https://plus.google.com/share?url=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no Google Plus" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/gp.png" alt="" width="24" /></a></li>
    <li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no Facebook" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/fb.png" alt="" width="24" /></a></li>
    <li><a href="http://twitter.com/share?url=<?php the_permalink() ?>&amp;text=<?php the_title(); ?>&amp;via=chocoladesign" title="Compartilhar <?php the_title(); ?> no Twitter" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/tw.png" alt="" width="24" /></a></li>
</ul>

但是，每當我單擊(ul.social li a) ，他都會復制該窗口。 其中一個打開尺寸為600x350 ，另一個打開全屏。

為什么會這樣？

Answer 1

這是因為，當您單擊該鏈接時，它會像往常一樣執行打開鏈接的默認操作，然后使用window.open代碼再次打開它。 因此，只需添加event.preventDefault（）即可阻止第一次打開。

 $("ul.social li a").click(function(event){
               event.preventDefault();
               var link = this.href;
               window.open(link, " ", "height=350,width=600");

Answer 2

這是因為，沒有阻止<a>的默認操作，因此即使打開了彈出窗口，該鏈接也會在新選項卡中打開。

嘗試這個。

 $("ul.social li a").click(function(e){
   e.preventDefault();
   var link = this.href;
   window.open(link, " ", "height=350,width=600");
 });

有關更多信息，請參閱此

Answer 3

不要將點擊事件附加在moseover事件內，每次您進行修改時，您都會獲得重復的點擊事件。

和$("ul.social li a").click錯誤，您將點擊附加到每個鏈接上，而不僅僅是$("ul.social").eq(i)

$(document).ready(function() {
    $("ul.social li a").click(function(e){ 
        e.preventDefault();
        var link = this.href;
        window.open(link, " ", "height=350,width=600");
     });
       $("ul.social").hide();
       $("span.link").each(function(i){
         $(this).mouseover(function(){
           $("ul.social").eq(i).show("fast", function(){

           });
         });
       });
     });