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");
 });

有关详细信息，请参阅this

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(){

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

单击时窗口弹出重复

3 个答案: