禁用/启用 EventListener

Question

我想在元素聚焦时禁用事件侦听器，并在聚焦时重新启用事件侦听器。 我怎样才能做到这一点？

*//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)*
});

Answer 1

与其动态添加/删除侦听器，我更愿意设置一个在焦点或焦点上切换的标志，并在主侦听器中检查该标志：

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">

您还可以在输入上stopPropagation 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">