javascript - JQuery 条件 PreventDefault() 在未调用时触发

Question

我编写了以下脚本。

  <script>
    $(document).ready(function(){
      $('a').data('loop',true);
      $('body').on('click', 'a', function(event){
        console.log($(this).data('loop'));
        if ($(this).data('loop') == 'true') {
          console.log('hit');
          event.preventDefault();
          caller = $(this);
          $(this).data('loop',false);
          var linkref = $(this).attr('href');
          var linkpos = $(this).offset();
          var screenwidth = $(window).width();
          var json_data = JSON.stringify({linkref: linkref, linkpos: linkpos, screenwidth: screenwidth});
          $.ajax({
            url: "content/submitcontenthandler?handler=core/_dashboard&method=tracking_ping",
            method: "POST",
            data: "json=" + json_data,
            complete: function (jqXHR, status) {
              console.log(status);
              console.log(caller);
              $(caller).click();
            }
          });
        } else {
          console.log(event.isDefaultPrevented());
          console.log('miss');
          $(this).data('loop',true);
        } 
      });
    });
  </script>

它有效，向我发送我想要的详细信息等等。但是!!!

当我单击一个链接时，它会通过 Ajax 向我发送详细信息，然后它意味着再次“单击”该事件，它确实做到了!但该事件不会触发它的正常操作。因此，当单击另一个页面的链接时，我会转到另一个页面...但这种情况并没有发生。

如果我注释掉 event.preventDefault(); 行然后事件按照我的预期触发...

所以对我来说，看起来 event.preventDefault 正在执行，即使它不应该在第二次调用期间执行......

抱歉，如果这有点难以理解。我自己也不太明白发生了什么事。 这可能是一个错误，还是我做了什么导致了这个问题？

我不认为我可以，但我已经成功地为此制作了一个jsfiddle。 https://jsfiddle.net/atg5m6ym/2001/

Answer 1

您可以尝试这个，不再担心“循环”:

$(document).ready(function () {
    $('body').on('click', 'a', function (event) {
        event.preventDefault();
        var caller = $(this);
        var linkref = $(this).attr('href');
        var linkpos = $(this).offset();
        var screenwidth = $(window).width();
        var json_data = JSON.stringify({linkref: linkref, linkpos: linkpos, screenwidth: screenwidth});
        $.ajax({
            url: "content/submitcontenthandler?handler=core/_dashboard&method=tracking_ping",
            method: "POST",
            data: "json=" + json_data,
            complete: function (jqXHR, status) {
                console.log(status);
                console.log(caller);
                window.location.href = linkref; // Redirect happens here
            }
        });

    });
});

更新

这里有几个问题需要注意:

1)某些链接不需要重定向(如上所述，控制显示/隐藏或在文档 anchor 内控制的引导模型链接

要纠正这个问题实际上取决于具体情况。通常 Bootstrap 会向链接添加特定的类或数据属性，以便您可以执行类似的操作。

$('body').on('click', 'a:not(list of things to exclude)'..

就我个人而言，我会将我想要跟踪的链接定义为:

<a href=<link> data-tracked='true'...

<script> 
      $('body').on("click","a[data-tracked='true']"...

或者，如果您想跟踪大多数链接(但有一些异常(exception))，您可以:

     <a href=<link> data-tracked='false'...
     <script> 
          $('body').on("click","a:not([data-tracked='false'])"...

或者更一般地说:

 <script> 
      $('body').on("click","a", function () {
            if ($(this).attr("data-tracked") == "false" || <you can check more things here>){ 
                  return true; //Click passes through
             } 
             //Rest of the tracking code here
      });