时间戳

首页 > 解决方案 > 第二个或嵌套的 event.PreventDefault() 不起作用

javascript - 第二个或嵌套的 event.PreventDefault() 不起作用

问题描述

我有这个 jquery 代码片段，如果我取消注释第一个 preventDefault() 它将正常工作，但我试图调用第二个 preventDefault()，但它不会工作。见下文：

$(document).ready(function () {
    $('#btnSubmit').click(function (event) {
        if ($('#tracking').val() != "") {
            // FIRST preventDefault()
            //event.preventDefault();
            var url = "/ReceivingLog/CheckTrackingNumber?number=" + $('#tracking').val();
            $.get(url, null, function (result) {
                if (result == "False") {
                    // SECOND preventDefault()
                    event.preventDefault();
                }
            });
        }
});

为什么第二个/嵌套的 preventDefault 不起作用？如何让第二个 preventDefault() 工作？

标签： javascriptjquery

解决方案

$.get是异步的——当它的响应返回时，外部线程已经完成，触发的事件已经正常完成。响应返回后，您必须再次触发该事件：

const button = document.querySelector('button');
button.addEventListener('click', clickListener);

let doSubmit = false;
function clickListener(e) {
  // If this was triggered by the `$.get`, return immediately, run the event as normal without interruption:
  if (doSubmit) {
    console.log('redirecting');
    return;
  }
  e.preventDefault();
  //$.get(url, ...
  setTimeout(() => {
    const success = true;
    if (success) {
      doSubmit = true;
      button.click();
    }
  }, 500);
}
<form>
<button type="submit">click</button>
</form>

推荐阅读