Копирование текста элемента привязки

#javascript #jquery

Вопрос:

У меня есть элемент привязки с адресом электронной почты внутри него, и я хочу, чтобы он был элементом привязки, чтобы было ясно, что вы можете щелкнуть по нему при изменении курсора.

Я немного погуглил и нашел решение другого вопроса о переполнении стека, но то, как это работает, добавляет прослушиватель событий в «копировать», что будет означать, что после того, как вы нажмете на него один раз, попытка вручную скопировать что-либо еще приведет к повторному копированию текста элемента привязки.

         clickToCopy.on('click', function(event) {
            var copyText = $(this).text();

            document.addEventListener('copy', function copyWorkaround(e) {
                console.log(e)
                e.clipboardData.setData('text/plain', copyText);
                e.preventDefault();
            }, true);

            console.log(document.execCommand('copy'))

            event.preventDefault()
        })

Это код. Я не могу понять, как впоследствии удалить прослушиватель событий или как это сделать, не добавляя второй прослушиватель событий в первую очередь.

1. Будет document.remveEventListener('copy', copyWorkaround) ли работать?

2. Нет, неперехваченная ошибка ссылки: copyWorkaround не определен

3. Не могли бы вы обновить пример? Я не понимаю, как вы используете его для получения этой ошибки.

4. Я отредактирую его в вопросе.

5. Переместиться copyWorkaround выше прослушивателя событий и передать только имя функции? addEventListener('click', copyWorkaround)

Ответ №1:

Исправление: кажется, я передавал true только для первого параметра в options, вместо этого вместо этого следует передавать ‘once’ как true, и прослушиватель событий удалит себя после возникновения один раз.

 document.addEventListener('copy', copyWorkaround, [true, true, false])

Ответ №2:

Я хотел бы представить более простую альтернативу через navigator.clipboard.writeText() . Этот фрагмент не запускается в SO (вероятно, потому, что он находится в iframe), но я только что протестировал его локально, и, похоже, он работает просто отлично.

 document.querySelector('.js-copy').addEventListener('click', event => {
  navigator.clipboard.writeText(event.target.textContent);
  event.preventDefault();
});

 <a class="js-copy" href="#">email@email.com</a>

Развернуть фрагмент