Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Запрет на клик span во время интервала (https://javascript.ru/forum/events/79323-zapret-na-klik-span-vo-vremya-intervala.html)

finlolo 23.01.2020 18:53

Запрет на клик span во время интервала
 
Привет, у меня есть span, который содержит ссылку.

Кликая на него копируется ссылка и выводится сообщение вместо ссылки, что ссылка скопирована. Через три секунды она меняется обратно на ссылку. Как сделать запрет на повторный клик?

Просто если кликать еще раз во время сообщения, то начинает мигать.

Код:
const span = document.querySelector(".link");
span.onclick = function() {
    document.execCommand("copy");
}
span.addEventListener("copy", function(event) {
    event.preventDefault();
    if (event.clipboardData) {
        event.clipboardData.setData("text/plain", span.textContent);
        var strLink =  event.clipboardData.getData("text");
        console.log(span.style);
        span.innerHTML = '<i class="far fa-copy"></i>  Ссылка скопирована';
        span.style.justifyContent = 'center';
        span.style.fontSize = '15px';
        setInterval(function(){
            span.innerHTML = strLink;
            span.style.justifyContent = 'flex-start';
            span.style.fontSize = '20px';
        },3000)
    }
});

рони 23.01.2020 18:58

Цитата:

Сообщение от finlolo
setInterval

зачем?

finlolo 23.01.2020 19:06

Да, тут перепутал с setTimeout, но и с ним не работает. Если в течение 3х сек кликнуть на "Ссылка скопирована", то появится опять "Ссылка скопирована", но уже без стилей

рони 23.01.2020 19:06

finlolo,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>
<body>
<span class="link">https://javascript.ru/forum/</span>
<script>
const span = document.querySelector(".link");
span.onclick = function() {
    document.execCommand("copy");
}
span.addEventListener("copy", function(event) {
    event.preventDefault();
    if(span.querySelector(".far")) return;
    if (event.clipboardData) {
        event.clipboardData.setData("text/plain", span.textContent);
        var strLink =  event.clipboardData.getData("text");
        console.log(span.style);
        span.innerHTML = '<i class="far fa-copy"></i>  Ссылка скопирована';
        span.style.justifyContent = 'center';
        span.style.fontSize = '15px';
        setTimeout(function(){
            span.innerHTML = strLink;
            span.style.justifyContent = 'flex-start';
            span.style.fontSize = '20px';
        },3000)
    }
});

  </script>
</body>
</html>

finlolo 23.01.2020 19:10

Спасибо!


Часовой пояс GMT +3, время: 21:29.