Javascript 如何在隐藏元素之前触发元素上的事件侦听器

我得到了一个输入框，当焦点事件触发时，提示文本列表将显示在输入框下方，当模糊事件触发时，列表将隐藏

我在提示符列表中添加了click event listener，但是当我尝试单击提示符时，会首先触发输入框上的模糊事件，这样提示符上的click事件就永远不会触发

有没有办法让提示文本上的click事件先触发？之后，我将启动模糊事件处理程序来隐藏提示文本

var textEl=document.getElementById（“text”），
listEl=document.getElementById（“列表”）；
textEl.onfocus=函数（）{
listEl.style.display=“初始”；
}
textEl.onblur=函数（）{
listEl.style.display=“无”；
}
listEl.onclick=函数（事件）{
var item=event.target；
警报（item.textContent）；
textEl.value=item.textContent；
}

#容器{
位置：相对位置；
宽度：300px；
保证金：自动；
}
输入{
宽度：100%；
}
#名单{
显示：无；
位置：绝对位置；
宽度：100%；
背景：#fff；
}
.项目{
填充：12px0；
边框底部：1px实心#ccacac；
}

项目1
项目2
项目3

onmousedown

将阻止列表隐藏，而不是单击

var textEl=document.getElementById（“text”），
listEl=document.getElementById（“列表”）；
textEl.onfocus=函数（）{
listEl.style.display=“初始”；
}
textEl.onblur=函数（）{
listEl.style.display=“无”；
}
listEl.onmousedown=函数（事件）{
var item=event.target；
警报（item.textContent）；
textEl.value=item.textContent；
}

#容器{
位置：相对位置；
宽度：300px；
保证金：自动；
}
输入{
宽度：100%；
}
#名单{
显示：无；
位置：绝对位置；
宽度：100%；
背景：#fff；
}
.项目{
填充：12px0；
边框底部：1px实心#ccacac；
}

项目1
项目2
项目3

onmousedown

将阻止列表隐藏，而不是单击

var textEl=document.getElementById（“text”），
listEl=document.getElementById（“列表”）；
textEl.onfocus=函数（）{
listEl.style.display=“初始”；
}
textEl.onblur=函数（）{
listEl.style.display=“无”；
}
listEl.onmousedown=函数（事件）{
var item=event.target；
警报（item.textContent）；
textEl.value=item.textContent；
}

#容器{
位置：相对位置；
宽度：300px；
保证金：自动；
}
输入{
宽度：100%；
}
#名单{
显示：无；
位置：绝对位置；
宽度：100%；
背景：#fff；
}
.项目{
填充：12px0；
边框底部：1px实心#ccacac；
}

项目1
项目2
项目3

您可以在

listEl

上使用

mouseenter

和

mouseleave

来决定

textEl

是否应响应

模糊事件。因此，基于此，您可以附加/分离模糊处理程序


var textEl=document.getElementById（“text”），
listEl=document.getElementById（“列表”）；
textEl.onfocus=函数（）{
listEl.style.display=“初始”；
}
var blurHandler=函数（）{
listEl.style.display=“无”；
};
textEl.onblur=blurHandler；
listEl.onclick=函数（事件）{
var item=event.target；
警报（item.textContent）；
textEl.value=item.textContent；
}
listEl.onmouseinter=函数（事件）{
textEl.onblur=null；
}
listEl.onmouseleave=函数（事件）{
textEl.onblur=blurHandler；
//如果元素不在焦点中，也会触发模糊处理程序。
如果（document.activeElement.id！=“text”）{
blurHandler（）；
}
}
#容器{
位置：相对位置；
宽度：300px；
保证金：自动；
}
输入{
宽度：100%；
}
#名单{
显示：无；
位置：绝对位置；
宽度：100%；
背景：#fff；
}
.项目{
填充：12px0；
边框底部：1px实心#ccacac；
}
.项目：悬停{
填充：12px0；
边框底部：1px实心#ccacac；
颜色：红色；
}

项目1
项目2
项目3
您可以在
listEl
上使用
mouseenter
和
mouseleave
来决定
textEl
是否应响应
模糊事件。因此，基于此，您可以附加/分离模糊处理程序


var textEl=document.getElementById（“text”），
listEl=document.getElementById（“列表”）；
textEl.onfocus=函数（）{
listEl.style.display=“初始”；
}
var blurHandler=函数（）{
listEl.style.display=“无”；
};
textEl.onblur=blurHandler；
listEl.onclick=函数（事件）{
var item=event.target；
警报（item.textContent）；
textEl.value=item.textContent；
}
listEl.onmouseinter=函数（事件）{
textEl.onblur=null；
}
listEl.onmouseleave=函数（事件）{
textEl.onblur=blurHandler；
//如果元素不在焦点中，也会触发模糊处理程序。
如果（document.activeElement.id！=“text”）{
blurHandler（）；
}
}
#容器{
位置：相对位置；
宽度：300px；
保证金：自动；
}
输入{
宽度：100%；
}
#名单{
显示：无；
位置：绝对位置；
宽度：100%；
背景：#fff；
}
.项目{
填充：12px0；
边框底部：1px实心#ccacac；
}
.项目：悬停{
填充：12px0；
边框底部：1px实心#ccacac；
颜色：红色；
}

项目1
项目2
项目3
您必须将onclick更改为onmousedown，它将在模糊事件之前触发

listEl.onmousedown = function(event) {
  var item = event.target;
  alert(item.textContent);
  textEl.value = item.textContent;
}

试试这个片段
var textEl=document.getElementById（“text”），
listEl=document.getElementById（“列表”）；
textEl.onfocus=函数（）{
listEl.style.display=“初始”；
}
textEl.onblur=函数（）{
listEl.style.display=“无”；
}
listEl.onmousedown=函数（事件）{
var item=event.target；
警报（item.textContent）；
textEl.value=item.textContent；
}
#容器{
位置：相对位置；
宽度：300px；
文科硕士