在 2 秒后删除 Click 事件上的 preventDefault()

Question

我想在 2 秒后删除一些链接上的 preventDefault() 方法。

我正在尝试解决如何删除 preventDefault() - 它会阻止链接工作，以及如何删除它以使其在 2 秒后发生。

我认为我可以通过删除初始 forEach 循环发生的“链接”类来做到这一点，但可惜这不起作用。

有人知道如何解决这个问题吗？

代码笔：https://codepen.io/emilychews/pen/VwPJNGE

var link = document.querySelectorAll(".link");

// prevent default on all specific links
link.forEach(function (item) {
  item.addEventListener("click", function (e) {
    e.preventDefault();
  });
});

// remove prevent Default
function allowLinks() {
  link.forEach(function (item) {
    item.classList.remove("link");
  });
}

setTimeout(function() {
  allowLinks();
}, 2000);

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

<a target="_blank" href="https://google.com" class="link">Make me work after 2 seconds</a>

Answer 1

删除link 类不会实现您的目标，因为事件侦听器与 DOM 元素相关联，而不是与类相关联。换句话说，类名是您访问 DOM 元素的方式，但类本身与事件侦听器没有关联。

一种选择是在两秒钟后删除事件侦听器本身。您可以通过在更高范围内定义事件侦听器函数并使用removeEventListener 方法来做到这一点。

var link = document.querySelectorAll(".link");

const listener = function (e) {
  e.preventDefault();
};

// prevent default on all specific links
link.forEach(function (item) {
 item.addEventListener("click", listener);
});

// remove prevent Default
function allowLinks() {
  link.forEach(function (item) {
    item.removeEventListener("click", listener);
  });
}

setTimeout(() => {
  console.log("links allowed!");
  allowLinks();
}, 2000);

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

<a href="https://google.com" class="link">Make me work after 2 seconds</a>

Answer 2

在这种类型的场景中，我会依赖于状态类：

var root = document.querySelector("<parent element selector>"); // e.g. nav, .post

root.addEventListener("click", function (e) {
  if (e.target.classList.contains("link")) {
    e.target.classList.remove("link");
    setTimeout(() => {
      e.target.classList.add("link");
    }, 2000);
  } else {
    console.log("Cancelling click:", e.target);
    return e.preventDefault();
  }
});