通过jquery每种方法弹出新窗口的问题（打开多个窗口）

Posted 2023-03-27

【中文标题】通过jquery每种方法弹出新窗口的问题（打开多个窗口）

【英文标题】：Problem with popping new window via jquery each method (opening more than one window)

【发布时间】：2011-10-30 21:45:24

【问题描述】：

我在 http://jsfiddle.net/Vcftv/2/ 创建了一个 JS Fiddle 来说明问题。

我有一些促销/模块，我正在通过 JS 将它们变成大目标链接。基本上，整个促销/模块变成了一个链接，而不仅仅是一个小小的子锚/html 文本链接。您可以单击促销/模块上的任意位置来关注子 href。

我需要其中一些来在新窗口中打开 href - 我只是为此挂钩到 target 属性。如果链接具有目标属性，则意味着弹出一个新窗口。当我进行一些测试和点击时，我遇到了打开多个窗口的问题。

在 JS fiddle 中，第一个模块在窗口中的 href 之后。第二个和第三个应该弹出新窗口。它们的工作不太正常，有时可以正常工作，但是当您关闭新窗口并再次单击该链接时，它会在 2 个新窗口中弹出该 URL。

有人有什么想法吗？

【参考方案1】：

问题在于，每次用户将鼠标悬停在 div 上时，您都会附加另一个点击事件侦听器！请参阅 my edit 并在控制台中注意“附加点击侦听器”调用的频率。

Kelly 的解决方案要简单得多，但您的实现问题正如我所描述的那样。 This edit 解决了这个问题。

【参考方案2】：

你让这件事变得比它需要的复杂得多。相反，在你的 JS 中做这样的事情：

$('.promoBigLink').click(function () 
  window.open($(this).find('a').attr('href'));
);

此代码采用promoBigLink 类的所有元素，并打开它在其子元素中找到的第一个锚元素的href。

当然，假设每个promoBigLink 中的第一个锚元素是应该被访问的元素。将 CSS 样式移动到 <style> 标记或单独的文件中。您可能必须处理有人单击锚标记本身的情况。

希望这会有所帮助！

【参考方案3】：

一个可能更好的解决方案是向上移动a，使其完全填满该区域。如果你给a 一个text-decoration: none 的CSS，它看起来是一样的并且没有怪癖。它也更易于访问，因为您现在还可以右键单击整个区域以复制 URL 等。

您需要将div 包装到一个新的a 中，该a 现在代表链接和目标。

http://jsfiddle.net/pimvdb/Vcftv/6/

(function($) 
    $.fn.promoBigLink = function() 

        return this.wrap(function() 
            var href   = $(this).find("a").attr('href'),   // save href + target
                target = $(this).find("a").attr('target');

            // wrap div into new a with href + target, with added class
            return $("<a>", href: href,
                             target: target).addClass("biglink");
        );

    ;
)(jQuery);

$(function() 
    $('div.promoBigLink').promoBigLink();
);

【参考方案4】：

问题是每次您将鼠标悬停在链接上时，它都会读取点击事件。

你可以在悬停的out listener中使用jquery unbind解绑点击事件。

$(this).unbind('click');

但是，最好使用其他一些建议来重构您的代码。