Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2020, 18:53
Аватар для finlolo
Аспирант
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 61

Запрет на клик 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)
    }
});
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2020, 18:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от finlolo
setInterval
зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2020, 19:06
Аватар для finlolo
Аспирант
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 61

Да, тут перепутал с setTimeout, но и с ним не работает. Если в течение 3х сек кликнуть на "Ссылка скопирована", то появится опять "Ссылка скопирована", но уже без стилей
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2020, 19:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2020, 19:10
Аватар для finlolo
Аспирант
Отправить личное сообщение для finlolo Посмотреть профиль Найти все сообщения от finlolo
 
Регистрация: 12.08.2018
Сообщений: 61

Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 15:39
Повторный клик по ссылке через время Tolys Элементы интерфейса 32 06.03.2013 16:11