Question

我正在尝试编写一种方法来捕获网站菜单上的用户点击，但我希望该过程对用户保持沉默，主要是当用户将鼠标悬停在锚标记上时，它会表现正常（显示它包含的链接）。我已经尝试过各种各样的方法来实现这一点，我现在几乎已经开始工作了，我的代码如下：

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="http://www.google.com" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

在jQuery中，我有：

$(".selectAnchor, .menuAnchor").click(function(event){
    event.stopPropagation();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        return true;
      }
    });
});

链接重定向到所选页面，但ajax代码永远不会完成，因此永远不会注册用户的点击。

我尝试使用event.preventDefault，但无法恢复已取消的事件。

问题的一部分来自额外的功能，例如，大多数用户右键单击锚标签以在新选项卡中打开（或使用控制+单击或中键单击），并使用类似

的内容

<a href="javascript:saveClick(o)">Google</a>

网站上不允许

（出于安全原因）。

有关如何做到这一点的任何建议？

Answer 1

使用event.preventDefault，然后成功使用location.href = self.href

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);
    var self = this;

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = self.href;
      }
    });
});

或者使用context属性删除var self = this

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);

    $.ajax({
      type: 'POST',
      context: this,
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = this.href;
      }
    });
});

Answer 2

试试这个

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="#" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

然后在jquery中：

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        window.location = "http://www.google.com"
      }
    });
});

Answer 3

最新的Chrome浏览器无法完成Ajax请求。由于浏览器页面收到了来自用户的新url请求，因此浏览器将立即终止该线程。

98％的情况下，您可以在网络标签中看到ajax请求被取消。

因此解决方案是使用sendBeacon API。这将异步执行POST请求。 Google Analytics（分析）使用此代码执行事件跟踪（例如：点击）。
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

 navigator.sendBeacon("{{url}}", param);

ajax请求后的HTML Anchor标记重定向链接

3 个答案: