在jQuery中挂起默认事件

Question

我想在jQuery脚本中延迟默认事件或事件。上下文是我想在用户执行某些操作（主要点击）几秒钟之前向用户显示一条消息，然后触发默认操作。

伪代码： - 用户点击链接/按钮/元素 - 用户得到一个弹出信息，提示“您正在离开现场” - 消息仍然在屏幕上X毫秒 - 默认动作（可以比HREF其他链接太）触发

到目前为止，我的尝试是这样的：

$(document).ready(function() { 
    var orgE = $("a").click(); 
    $("a").click(function(event) { 
     var orgEvent = event; 
     event.preventDefault(); 
     // Do stuff 
     doStuff(this); 

     setTimeout(function() { 
      // Hide message 
      hideMessage(); 
      $(this).trigger(orgEvent); 
     }, 1000); 
    }); 
}); 

当然，正如所料，这并不工作，但可能会出现什么，我试图做的。

我无法使用插件，因为这是一个没有在线访问的托管环境。

有什么建议吗？

Answer 1

这可能会实现：

$(document).ready(function() { 
    $("a").click(function(event) { 
    event.preventDefault(); 
    doStuff(this); 

    setTimeout(function() { 
     hideMessage(); 
     $(this).click(); 
    }, 1000); 
    }); 
}); 

注：没有经过测试的

Answer 2

我可能会做这样的事情。

$("a").click(function(event) { 
    event.preventDefault(); 
    doStuff(this); 
    var url = $(this).attr("href"); 

    setTimeout(function() { 
     hideMessage(); 
     window.location = url; 
    }, 1000); 
}); 

我不知道如果url可以从定时功能里面看到。如果没有，您可能需要在点击处理程序之外声明它。

编辑：如果您需要从定时功能触发事件，可以使用类似karim79建议的东西，虽然我会做一些更改。

$(document).ready(function() { 
    var slept = false; 
    $("a").click(function(event) { 
    if(!slept) { 
     event.preventDefault(); 
     doStuff(this); 

     var $element = $(this); 
     // allows us to access this object from inside the function 

     setTimeout(function() { 
      hideMessage(); 
      slept = true; 
      $element.click(); //triggers the click event with slept = true 
     }, 1000); 
     // if we triggered the click event here, it would loop through 
     // this function recursively until slept was false. we don't want that. 
    } else { 
     slept = false; //re-initialize 
    } 
    }); 
}); 

编辑：一些测试和研究之后，我不知道它实际上可能触发<a>元素的原始单击事件。除了<a>之外的任何元素似乎都是可能的。

Answer 3

类似这样的事情应该可以做到。添加一个新类（可能比我选择的名称更明智），将其添加到您想要受影响的所有链接中。当您显示弹出窗口时移除该类，因此当您再次调用.click（）时，您的代码将不再运行，并且会发生默认行为。

$("a").addClass("fancy-schmancy-popup-thing-not-yet-shown").click(function() { 
    if ($(this).hasClass("fancy-schmancy-popup-thing-not-yet-shown")) 
     return true; 

    doStuff(); 
    $(this).removeClass("fancy-schmancy-popup-thing-not-yet-shown"); 

    var link = this; 
    setTimeout(function() { 
     hideMessage(); 
     $(link).click().addClass("fancy-schmancy-popup-thing-not-yet-shown"; 
    }, 1000); 

    return false; 
}); 

Answer 4

可能最好的办法是使用解除绑定。例如：

$(document).ready(function() { 
    $("a").click(function(event) { 
     event.preventDefault(); 
     // Do stuff 
     this.unbind(event).click(); 
    }); 
})