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

以下if语句将在元素存在data-loop属性时返回true，无论其值如何：

if ($(this).data('loop')) {

需要更改以检查值：

if ($(this).data('loop') == 'true') {

当您指定任何元素属性的值时，它将变为字符串，因此需要进行字符串比较。

Answer 2

你可以试试这个而不用担心＆＃34;循环＆＃34;了：

$(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）某些链接不需要重定向（如上所述，控制显示/隐藏或在文档锚点内的引导模型链接

要纠正这个问题，这取决于具体情况。通常，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']"...

或者，如果您想跟踪少数例外的大多数链接，您可以：

     <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
      });

Answer 3

Event.preventDefault()未被第二次执行。

方法完成后，会发生链接重定向。因此，在您的情况下，当ajax调用的complete方法完成时，将发生重定向。

假设我们在代码中有event1和event2对象。 event1是ajax调用方法中的对象，event2是递归调用（第二次调用）方法中的事件对象。

因此，当第二次点击链接时，我们仍然需要执行complete方法。一旦它返回到ajax调用的complete方法，它就会发现event1有preventDefault property true并且它没有重定向。

Answer 4

试试这个;）

$(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",
      /* To temprary block browser; */
      async: false,
      data: "json=" + json_data,
      complete: function(jqXHR, status){
        /* add class **ignore** to a element you don't want to redirect anywhere(tabs, modals, dropdowns, etc); */
        if(!caller.hasClass('ignore')){
          /* Redirect happens here */
          window.location.href = linkref;
        }
      }
    });

  });
});

JQuery条件preventDefault（）在未调用时触发

4 个答案: