Question

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

我有一些宣传片/模块，我正在通过JS变成大目标链接。基本上，整个促销/模块成为一个链接，而不仅仅是一个小的儿童锚/ HTML文本链接。您可以点击促销/模块上的任意位置来关注子href。

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

在JS小提琴中，第一个模块跟随窗口中的href。第二个和第三个应弹出新窗口。它们的工作效果不是很好，有时一个工作正常，但当你关闭新窗口并再次点击链接时，它会弹出 2 新窗口中的网址。

有人有什么想法吗？

Answer 1

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

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

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

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

希望这有帮助！

Answer 2

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

您需要将div打包成一个新的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();
});

Answer 3

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

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

Answer 4

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

你可以在悬停的out监听器中使用jquery解绑绑定取消绑定click事件。

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

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

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

4 个答案: