2 秒后在单击事件中删除 preventDefault()

Question

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

我正在努力解决如何删除 preventDefault() - 它会阻止链接工作，以及如何做到这一点，以便它在 2 秒后发生。

我想我可以通过删除 'link' class 初始的 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

在这种情况下，我会依赖类的状态：

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

Answer 2

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

一种选择是在两秒后删除事件侦听器本身。您可以通过在更高范围内定义事件侦听器函数并使用 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>

2 秒后在单击事件中删除 preventDefault()

Remove preventDefault() On A Click Event After 2 Seconds

javascript

events

settimeout

preventdefault