Javascript 如何指定focusout和click事件的顺序？

我有一个带有JS

focusout

事件的输入字段。在我的输入字段下，我有一个带有建议的自动完成弹出窗口。但是当我点击一个建议时，它会在事件监听器点击自动完成之前播放焦点！关于如何解决这一冲突，有什么线索吗

输入及其自动完成的图片：

单击

事件：

resultsFrom.addEventListener('click', (event) => {
  let e;
    e = event.target.parentNode;
  inputFrom.value = e.getAttribute('data-display');
});

inputFrom.addEventListener('focusout', () => {
  const list = document.querySelector('#results-from');
  let first = list.firstChild;
  inputFrom.value = first.getAttribute('data-display');
  resultsFrom.innerHTML = '';
});

focusout

事件：

resultsFrom.addEventListener('click', (event) => {
  let e;
    e = event.target.parentNode;
  inputFrom.value = e.getAttribute('data-display');
});

inputFrom.addEventListener('focusout', () => {
  const list = document.querySelector('#results-from');
  let first = list.firstChild;
  inputFrom.value = first.getAttribute('data-display');
  resultsFrom.innerHTML = '';
});

在

relatedTarget的事件对象上有一个属性-这是将获得焦点的元素，在本例中，它将是您正在单击的元素

您需要检查该元素是否在您的结果中，如果是这样的话，就不要清除它们。大概是这样的：

inputFrom.addEventListener('focusout', (e) => {
  const list = document.querySelector('#results-from');
  if (!list.contains(e.relatedTarget)) {
    //the target is not in the list, continue as before
    //otherwise allow the click to function by not clearing out resultsFrom
    let first = list.firstChild;
    inputFrom.value = first.getAttribute('data-display');
    resultsFrom.innerHTML = '';
  }
});

尝试
event.stopPropagation（）
在
中单击事件。或者添加一些变量作为标志（例如，
var clicked=false
），并在
click
事件和
focusout
中将其设置为true，检查变量是否为true或false。然后设置为false。@KrzysztofJaniszewski这可能不起作用，因为这两个事件是不同的
stopPropagation（）
阻止事件在DOM中冒泡tree@M是的，你是对的，谢谢你的回答。我试图实现相关的目标，但还没有成功。当我放置一个console.log（例如relatedTarget）时；在
上，如果（！list.contains（e.relatedTarget））{…}
每次发生focusout时都指示null。我做错了什么？我想也许你使用了一个不能获得焦点的元素-你用什么来获得结果？也许它们需要是
标签，以便在单击时可以获得焦点。它们是
..
好的-然后检查-除了我上面的答案之外，您还需要这样做，以便您单击的元素可以获得焦点。通过使用默认情况下可以接收焦点的元素，或者该答案建议将
tabindex=“0”
添加到您的
中也应该有效。非常感谢您的回答。使用tabindex=“0”时，它就像一个符咒。