Переход по ссылке только после второго клика на чистом JS?

Question

Нужно чтобы по клику на ссылку с определенным классом сначала ничего не происходило, а после второго клика происходил переход на страницу. Проблема в том что таких ссылок много, и у всех одинаковый класс.Не знаю как это сделать.

Answer 1

Для подсчета кол. каждого элемента можно использовать его data аттрибут, так и localstorage.

Как пример:

var elems = document.querySelectorAll('.links');
[].forEach.call(elems, function (item, i) {
    item.onclick = function (e) {
      var elem = e.target;
      if (!elem.dataset.clicked) {
          elem.dataset.clicked = true;
          e.preventDefault();
      } else 
          elem.removeAttribute('data-clicked')
    }
});

<ul>
  <li><a href="" class="links">text</a></li>
  <li><a href="" class="links">text</a></li>
  <li><a href="" class="links">text</a></li>
</ul>

Answer 2

Придумал такое. Алгоритм основан на добавлении классов на этапах кликов. Класс a, если еще не нажимали, класс b, если нажали только раз.

С другой стороны, логичным покажеться использование data-атрибутов вместо классов.

const links = document.getElementsByTagName('a');
for (const link of links) {
  const cl = link.classList;
  cl.add('a');

  link.onclick = e => {
    if (cl.contains('b')) {
      cl.remove('b');
      cl.add('a');
      
      console.log('clicked two times!');
    } else if (cl.contains('a')) {
      cl.add('b');
      cl.remove('a');
    }
  }
}

<a href="#">Link 1</a>
<a href="#">Link 2</a>

Либо, без использования классов, но с дополнительным массивом (с кол-вом кликов на каждую ссылку).

const links = Array.from(document.getElementsByTagName('a'));
const arr = new Array(links.length).fill(0);

for (const link of links) {
  link.onclick = e => {
    const i = links.indexOf(link);
    arr[i] += 1;
    if (arr[i] != 1) {
      console.log('clicked twice');
      arr[i] = 0;
    }
  }
}

<a href="#">Link 1</a>
<a href="#">Link 2</a>

Answer 3

Странный метод, но...

document.querySelector(".anything").addEventListener("click",
  function(event) {
    event.target.innerHTML = "Ещё раз!";
    document.querySelector(".anything").addEventListener("click",
      function(event) {
        event.target.innerHTML = "Переходим...";
        location.href = "https://i.stack.imgur.com/f66Hv.gif";
      }
    );
  }
);

.anything {
  width: 150px;
  height: 40px;
  background-color: rgb(225, 225, 225);
  border: 1px solid rgb(200, 200, 200);
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.anything:hover {
  filter: invert(0.1);
  cursor: pointer;
}

<div class="anything">
  <p>
    Ну, жми давай!
  </p>
</div>

Answer 4

Это можно организовать сильно проще:

let bubu = document.querySelectorAll(".bubu");

for (let i = 0; i < bubu.length; i++) {
  bubu[i].onclick = function(e) {
    e.preventDefault();  // Блокирует переход по ссылке
    this.onclick = null; // После первого клика, обработчик удаляется.
  };
}

<a class="bubu" target="_blank" href="https://google.com">111</a>
<a class="bubu" target="_blank" href="https://yandex.ru">222</a>

Можно еще так, но предыдущий по внешнему виду больше понравился)

bubu[i].addEventListener("click", function _tmp(e) {
  e.preventDefault();
  this.removeEventListener("click", _tmp);
};

Answer 5

Можно просто переменную создать в глобальном контексте, проверять ее и инкрементить, после клика сбрасывать

БЛОГ НА HUSL

Переход по ссылке только после второго клика на чистом JS?

Ответы (5 шт):