Force user on page certain time

JavaScript
5

Hi @javascript7, another approach to actually disable the link would be to set the pointer events to none…

CSS

.disabled {
  pointer-events: none;
  color: gray;
}

HTML

<a href="http://example.com/" class="disabled">Click me</a>

JS

const link = document.querySelector('.disabled')

window.setTimeout(() => {
  link.classList.remove('disabled')
}, 1000)

Edit: Ah forget that, you you can then still access the link using the keyboard. The approach suggested by @James_Hibbard would probably be most fail-safe. Or if you want to keep the href attribute (so you don’t jump to the top of the page when clicking the “disabled” link), you can prevent the default event like so:

const link = document.querySelector('.disabled')

function preventEvent (event) {
  event.preventDefault()
}

link.addEventListener('click', preventEvent)

window.setTimeout(() => {
  link.removeEventListener('click', preventEvent)
}, 1000)