Anchor plus href 和 onclick 事件（跟踪）

Question

我得到了以下锚点来访问目标站点并跟踪用户的统计信息：

<a href="http://target.tld" target="_blank" onclick="$('<img></img>').attr({src: 'stats.php?my_param=value'}); return true;">Foo</a>

<a href="http://target.tld" target="_self" onclick="$('<img></img>').attr({src: 'stats.php?my_param=value'}); return true;">Foo</a>

第一个为 img (_blank) 生成 200 Ok 的状态，但第二个 (_self) 的状态为 (canceled)。 p>

谁能告诉我为什么，有没有更好的方法？

谢谢！

Answer 1

首先，避免on*事件属性。如果你有 jQuery，用它来绑定你的事件。其次，看起来您正在创建 img 元素，目的是发出 GET 请求来跟踪点击。相反，只需使用 jQuery 来触发请求。

<a href="http://target.tld" target="_blank" class="track-link" data-value="foo">Foo</a>    
<a href="http://target.tld" target="_self" class="track-link" data-value="bar">Foo</a>

$('.track-link').click(function() {
    var trackValue = $(this).data('value');
    $.get('/stats.php', { my_param: trackValue });
});

更新

尝试使用mousedown 事件来确保在页面传输之前发送请求：

$('.track-link').mousedown(function() {
    var $link = $(this);

    if (!$link.data('request-sent')) {
        $.get(
            '/stats.php', 
            { my_param: $link.data('value') },
            function() {
                $link.data('request-sent', true);
            }
        );
    }
});

更新 #3

$('.track-link').click(function(e) {
    e.preventDefault();
    var $link = $(this);
    $.get(
        '/stats.php', 
        { my_param: $link.data('value') },
        function() {
            window.location.assign($link.prop('href'));
        }
    );
});