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

我可能会做这样的事情。

$("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 2

这样的事情应该可以解决问题。在您希望受影响的所有链接中添加一个新类（可能名称比我选择的名称更明智）。当您显示弹出窗口时删除该类，因此当您再次调用.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 3

执行此操作的最佳方法可能是使用unbind。类似的东西：

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

Answer 4

这可能有效：

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

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

注意：完全未经测试

在jQuery中挂起默认事件

4 个答案: