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

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的事件对象上有一个属性 - 这是要获得焦点的元素，在这种情况下，它将是您点击的元素。< / p>

您需要检查该元素是否在您的结果中，如果是这种情况，则不要清除它们。像这样：

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