如何只在发生2个DOM事件时执行javascript代码

Question

ul将在输入字段得到一些输入时显示。现在，当输入和ul都失去焦点时，我想隐藏ul。与stackoverflow搜索栏的工作原理相同。我尝试了一些选择，但没有成功。我确信我没有为此应用合适的方法。我想知道它的功能，所以，请用javascript而不是jquery给出你的解决方案。

document.getElementById("1").addEventListener("blur", function(){
document.getElementById("2").addEventListener("blur", function(){
document.getElementById("2").style.display = 'none'
})
})

<input type="text" id="one">
<ul id="two" style="display: none;">
<li>ajbf</li>
</ul>

Answer 1

您可以通过两个步骤来实现此效果：

1. 将属性tabindex添加到<ul>中-这将使元素可聚焦
2. 创建一个名为pageState(或类似对象(的对象，该对象可以监视各种元素的状态，包括<input>是否具有不是''的value，以及<input>或<ul>是否具有focus

---

工作示例：

const myInput = document.getElementById('my-input');
const myList = document.getElementById('my-list');
// THIS object WILL KEEP TRACK OF THE STATE OF THE PAGE
const pageState = {
myInputEmpty: true,
myInputBlur: true,
myListBlur: true
}
// THIS FUNCTION WILL CHANGE THE PAGE ACCORDING TO THE pageState OBJECT
const checkPageState = () => {
if (pageState.myInputEmpty === true) {
myList.classList.remove('show');
}
if (pageState.myInputEmpty === false) {
myList.classList.add('show');
}

if ((pageState.myInputBlur === true) && (pageState.myListBlur === true)) {
myList.classList.remove('show');
}
}
// THIS FUNCTION MONITORS THE value OF THE <input>
const checkInputValue = () => {
if (myInput.value === '') {
pageState.myInputEmpty = true;
}

else {
pageState.myInputEmpty = false;
}

checkPageState();
}
// THIS FUNCTION MONITORS WHERE ON THE PAGE THE FOCUS IS
const checkFocus = () => {
if (document.activeElement.id !== 'my-input') {
pageState.myInputBlur = true;
}

else {
pageState.myInputBlur = false;
}
if (document.activeElement.id !== 'my-list') {
pageState.myListBlur = true;
}

else {
pageState.myListBlur = false;
}

checkPageState();
}
myInput.addEventListener('keyup', checkInputValue, false);
document.body.addEventListener('click', checkFocus, false);

#my-input,
#my-list {
margin: 0;
padding: 0;
}
#my-list {
display: none;
width: 120px;
height: 120px;
padding: 6px;
border: 1px solid rgb(255, 0, 0);
list-style-type: none;
}
#my-list.show {
display: block;
}

<input type="text" id="my-input">
<ul id="my-list" tabindex="0">
<li>apples</li>
<li>bananas</li>
<li>cherries</li>
<li>dragonfruit</li>
</ul>

---

进一步阅读：

• tabindex：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
• activeElement：https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

Answer 2

考虑到页面上可能有或没有具有类似功能要求的其他项目，最好给出输入和ul项目ID并直接针对它们：

const x = document.getElementById('mytext')
const ul = document.getElementById('mylist')
x.addEventListener('focus', function() {
ul.style.display = '';
})
x.addEventListener('blur', function() {
ul.style.display = 'none'
})

<input type="text" id="mytext">
<ul style="display: none;" id="mylist">
<li>ajbf</li>
</ul>

Answer 3

不需要2个事件，只需在所有列表项中添加一个点击事件即可。

const input = document.querySelector('input');
const ul = document.querySelector('ul');
const lis = [...ul.querySelectorAll('li')];
input.addEventListener('input', function() {
ul.style.display = 'initial';
});
lis.forEach(li => {
li.addEventListener('click', function() {
ul.style.display = 'none';
console.log(this.innerHTML);
});
});

<input type="text">
<ul style="display: none;">
<li>abc</li>
<li>efg</li>
<li>hij</li>
</ul>