如何指定焦点和点击事件的顺序？

Question

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

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

click 事件：

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

focusout 事件：

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

Answer 1

focusout event 在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 = '';
  }
});