mootools 内联 Ajax 调用不起作用

Question

我正在尝试使用 mootools ajax 请求来记录对传出链接的点击。到目前为止，这就是我正在做的事情。

每个链接如下所示：

<div id="1">    
<a href="http://stackoverflow.com/" onclick="clickRecord(1)">StackOverflow</a>
</div>

javascript函数clickRecord(id)定义如下：

function clickRecord(id){
    var u = "record.php";   
    var req = new Request({
      method: 'post',
      url: u,
      data:{'id':id},
      onComplete:function(response){
      }
    }).send();

}

我的问题是这样的。如果我添加一个 return false;对于 onclick="" 声明，一切正常，当然问题是点击不会将用户带到预期的页面。如果我没有返回 false；那么似乎永远不会执行ajax调用。

我认为应该首先执行 onclick 事件，然后只执行默认操作。不是这样吗？

如果你改用 onmousedown 事件，还有一个更奇怪的场景。好像在 Firefox 上，如果你使用 onmousedown 事件，一旦你进入新页面，你不能简单地导航回旧页面，你必须刷新旧页面。否则不执行调用。这不会发生在 IE 上。

Answer 1

不要使用 onclick - 非常 1995。

而是将事件附加到元素并使用event.stop()，即：

<a href="http://stackoverflow.com/" data-id="1">StackOverflow</a>

JS：

document.getElements('a').addEvents({
    click: function(event) {
        event.stop();
        var u = 'record.php';
        var req = new Request({
            method: 'post',
            url: u,
            data: {
                'id': this.get('data-id');
            },
            onComplete: function(response) {}
        }).send();
    }
});

顺便说一句。 <div id="1"> 这在 HTML 中无效，ID 需要以字母开头。

Answer 2

好的。找到了其中一个问题的答案：

1. 通过 onclick() 声明时，内联 mootools 请求未执行。 这似乎是由于脚本不同步造成的。因此，它可能在没有真正完全提交请求的情况下返回，然后浏览器移动到另一个页面中断执行。向脚本添加同步调用可以解决问题：

function clickRecord(id){
    var u = "record.php";   
    var req = new Request({
      async:false,
      method: 'post',
      url: u,
      data:{'id':id},
      onComplete:function(response){
      }
    }).send();
}

onmousedownevent 中提到的第二个问题，即如果浏览器向后导航，firefox 不执行 ajax 调用仍未解决。但是，我将其保留，因为这不是提出的主要问题。