2秒后在click事件上删除preventDefault() [英] Remove preventDefault() On A Click Event After 2 Seconds

问题描述

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

我正试图找出如何删除preventDefault()－阻止链接正常工作，但也要设法做到这一点，以便在2秒钟后发生.

我想我可以通过删除最初的forEach循环发生的'link'类来做到这一点，但是a这行不通.

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

CodePen: https://codepen.io/emilychews/pen/VwPJNGE

  var link = document.querySelectorAll(.link");//阻止所有特定链接的默认设置link.forEach(功能(项目){item.addEventListener("click"，函数(e){e.preventDefault();});});//删除防止默认函数allowLinks(){link.forEach(功能(项目){item.classList.remove("link");});}setTimeout(function(){allowLinks();}，2000)；  

  body {边距:0;显示:flex;align-items:居中;证明内容:中心；宽度:100％;高度:100vh；}  

 < a target ="_ blank" href ="https://google.com" class ="link">让我工作2秒后</a>  

解决方案

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

一种选择是在两秒钟后删除事件侦听器本身.您可以通过在更高范围内定义事件侦听器函数并使用 removeEventListener 方法来实现此目的.

  var link = document.querySelectorAll(.link");const listener =函数(e){e.preventDefault();};//阻止所有特定链接的默认设置link.forEach(功能(项目){item.addEventListener("click"，监听器);});//删除防止默认函数allowLinks(){link.forEach(功能(项目){item.removeEventListener("click"，监听器);});}setTimeout(()=> {console.log(允许链接！");allowLinks();}，2000)；  

  body {边距:0;显示:flex;align-items:居中;证明内容:中心；宽度:100％;高度:100vh；}  

 < a href ="https://google.com" class ="link"> 2秒钟后让我工作</一个>  

I have a preventDefault() method on some links that I would like to remove after 2 seconds.

I'm trying to both work out how to remove the preventDefault() - which stops the links from working, but also how to do it so it happens after 2 seconds.

I thought I could do it by removing the 'link' class the initial forEach loop happens on, but alas this doesn't work.

Does anyone know how to solve this problem?

CodePen: 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>

解决方案

Removing the link class won't accomplish your goal because the event listener is associated with the DOM element, not the class. In other words, the class name is the means by which you accessed the DOM elements but the class itself holds no association with the event listener.

One option is to remove the event listener itself after two seconds. You can do this by defining the event listener function in a higher scope and the using the removeEventListener method.

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秒后在click事件上删除preventDefault()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！