前言
主要实现思路是全局监听点击事件的点击范围是否包含搜索结果内容。
效果
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局点击事件监听-搜索栏项内容可操作</title>
<style>
.input-container {
position: relative;
}
#searchInput {
width: 200px;
}
.dropdown {
position: absolute;
width: 200px;
height: 100px;
background: indianred;
color: #fff;
display: none;
}
</style>
</head>
<body>
<div class="input-container">
<input id="searchInput" placeholder="输入" />
<div class="dropdown">
搜索结果
<br>
搜索结果
<br>
搜索结果
<br>
搜索结果
</div>
</div>
<script>
document.getElementById('searchInput').addEventListener('focus',function() {
var dropdown=document.querySelector('.dropdown');
dropdown.style.display='block';
});
document.addEventListener('click',function(event) {
var inputContainer=document.querySelector('.input-container');
if(!inputContainer.contains(event.target)) {
var dropdown=document.querySelector('.dropdown');
dropdown.style.display='none';
}
});
</script>
</body>
</html>
