Отключить / включить EventListener - PullRequest
2 голосов
/ 18 марта 2020

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

*//event listener execute function on paste*
document.addEventListener('paste', function (evt) {
  pasteClipboardURL(evt); 
});

*//on focus disable event listener paste event and function*
$('#input-url').on('focus', function (url) {
  *//disable document.addEventListener('paste', function (evt)*
});

$('#input-url').on('focusout', function (url) {
  *//enable document.addEventListener('paste', function (evt)*
});

1 Ответ

2 голосов
/ 18 марта 2020

Вместо того, чтобы динамически добавлять / удалять слушателей, я бы предпочел установить флаг, который переключается при фокусировке или фокусировке, и проверить этот флаг в основном слушателе:

let focused = false;
$(document).on('paste', (e) => {
  if (!focused) pasteClipboardURL(e);
});
$('#input-url')
  .on('focus', () => focused = true)
  .on('focusout', () => focused = false);

const pasteClipboardURL = () => console.log('pasteClipboardURL');
let focused = false;
$(document).on('paste', (e) => {
  if (!focused) pasteClipboardURL(e);
});
$('#input-url')
  .on('focus', () => focused = true)
  .on('focusout', () => focused = false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="some other input">
<input id="input-url" placeholder="input-url">
<input placeholder="some other input">

Вы также можете прослушивать paste событие на входе и использовать stopPropagation на событии, чтобы слушатель документа не видел его :

const pasteClipboardURL = () => console.log('pasteClipboardURL');
$(document).on('paste', pasteClipboardURL);
$('#input-url').on('paste', e => e.stopPropagation());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder="some other input">
<input id="input-url" placeholder="input-url">
<input placeholder="some other input">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...