如果我的模糊事件移除元素，则单击未执行的事件

Question

我有一个动态下拉列表，里面的项目可以被点击(会做些什么)

• 当焦点时，它将显示一些建议项
• 当模糊时，它将删除列表节点

中的项。

问题是当模糊/焦点事件触发器、my和click事件没有触发时。

下面是代码中的最小复制：https://codepen.io/XiaoChu/pen/NWYJdvj?editors=1111

HTML：

<div class="search-wrapper">
  <input id="keyword-search" type="text" placeholder="Type some keywords...">
  <ul id="result-list"></ul>
</div>

联署材料：

const inputDom = document.getElementById('keyword-search');
const listDom = document.getElementById('result-list');

inputDom.addEventListener('focus', () => {
  for(let i = 0; i < 5; i++) {
    const li = document.createElement('li');
    li.innerText = `item-${i + 1}`;
    li.classList.add('item');
    li.addEventListener('click', (e) => {
      alert(e.currentTarget.innerText);
    });
    listDom.appendChild(li);
  }
});

inputDom.addEventListener('blur', () => {
  listDom.innerHTML = '';
});

我尝试过setTimeout等待几毫秒，而且它可以工作。但我想知道这个解决方案是个好办法吗？

Answer 1

您可以像这样使用flag、mouseover和mouseleave

const inputDom = document.getElementById('keyword-search');
const listDom = document.getElementById('result-list');

let isInList;
listDom.addEventListener('mouseover', () => {
  isInList = true;
  console.log(isInList);
})
listDom.addEventListener('mouseleave', () => {
  isInList = false;
  console.log(isInList)
})

inputDom.addEventListener('focus', () => {
  for(let i = 0; i < 5; i++) {
    const li = document.createElement('li');
    li.innerText = `item-${i + 1}`;
    li.classList.add('item');
    li.addEventListener('click', (e) => {
      alert(e.currentTarget.innerText);
    });
    listDom.appendChild(li);
  }
});

inputDom.addEventListener('blur', () => {
  if(!isInList){
     listDom.innerHTML = '';
  }
});