下拉立即关闭

Question

我希望在每次点击外部和输入字段后关闭我的下拉列表。但点击后，该字段立即打开和关闭。这是代码。它非常笨重，但可以理解。

var slitems = document.getElementsByClassName('slit');
		ddown = document.getElementsByClassName('ddown');
	function valueChange(n){
		var slitemsin = document.getElementsByClassName('s'+(n+1));
		for(var j=0;j<slitems.length;j++){
			slitemsin[j].addEventListener('click', function(){
				ddown[n].value = this.textContent || this.innerText;
				document.getElementById('sl'+(n+1)).classList.remove('slactive');
			});}}
	function ddownEvent(n){
		return function(){
			document.getElementById('sl'+(n+1)).classList.add('slactive');
			ddown[n].classList.remove('req');
			ddown[n].classList.add('filled');
			valueChange(n);
			};
		};
	function ex(e,n){
		return function(){
			if(e.target != ddown[n] && e.target.id != 'sl'+(n+1)){
				if(ddown[n].value === 'day' || ddown[n].value === 'month' || ddown[n].value === 'capacity' || ddown[n].value === 'year' || ddown[n].value === "hh" || ddown[n].value === 'mm') ddown[n].classList.remove('filled');
				document.getElementById('sl'+(n+1)).classList.remove('slactive');
			}
		};
	}
	for(var n=0; n<ddown.length; n++) {
		ddown[n].addEventListener('mousedown',ddownEvent(n));
		ddown[n].addEventListener('mouseup', ex(event,n));
		}

html {
  background: black;
}
body {
	background: black;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100vh;
}
.frow {
	width: 1500px;
	height: 40px;
	border-left: 6px white solid;
	margin-top: 25px;
}
.frow:first-child{
	margin-top:60px;
}
.ptext {
	font-family: "Helvetica";
	font-size: 22px;
	background: none;
	border: none;
	border-bottom: 3px #525252 solid;
	color: #525252;
	transition: all .1s;
	margin-left: 30px;
	display: inline-block;
	resize:none;
	padding: 0;
}
.filled {
	color: white;
	border-bottom: 3px white solid;
}
.ptext:focus{
	color: white;
	border-bottom: 3px white solid;
}
.ptext:first-child {
	margin-left: 20px;
}
.ddown {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.sl{
	position: absolute;
	height: 0px;
	box-shadow: 0px 0px 0px 0px black;
	overflow: auto;
	cursor: pointer;
	visibility: hidden;
	transition: all .15s;
	background-color: white;
}
.sl::-webkit-scrollbar{
	display:none;
}
.slit {
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-family: "Helvetica";
	font-size: 22px;
	color: #292929;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.slit:hover{
	background-color: #525252;
	color: white;
}
.slactive{
	height: 220px;
	visibility: visible;
	box-shadow: 0px 0px 34px 0px black;
}

        <div class="frow">
                <input name="Day" spellcheck="false" class="ptext ptextc ddown" type="text" value="day" minlength="1" maxlength="2" style="height:30px;width:50px;" readonly/>
                <ul class="sl" id="sl1" style="width:50px;left:15px;top:90px;">
                        <li class="slit s1">1</li>
                        <li class="slit s1">2</li>
                        <li class="slit s1">3</li>
                        <li class="slit s1">4</li>
                        <li class="slit s1">5</li>
                        <li class="slit s1">6</li>
                        <li class="slit s1">7</li>
                        <li class="slit s1">8</li>
                        <li class="slit s1">9</li>
                        <li class="slit s1">10</li>
                        <li class="slit s1">11</li>
                        <li class="slit s1">12</li>
                        <li class="slit s1">13</li>
                        <li class="slit s1">14</li>
                        <li class="slit s1">15</li>
                        <li class="slit s1">16</li>
                        <li class="slit s1">17</li>
                        <li class="slit s1">18</li>
                        <li class="slit s1">19</li>
                        <li class="slit s1">20</li>
                        <li class="slit s1">21</li>
                        <li class="slit s1">22</li>
                        <li class="slit s1">23</li>
                        <li class="slit s1">24</li>
                        <li class="slit s1">25</li>
                        <li class="slit s1">26</li>
                        <li class="slit s1">27</li>
                        <li class="slit s1">28</li>
                        <li class="slit s1">29</li>
                        <li class="slit s1">30</li>
                        <li class="slit s1">31</li>
                    </ul>
                    

ddown[n]是输入字段，sl1，sl2，sl3，...，'sl'+(n+1)是下拉ID。

Answer 1

尝试将事件附加到mouseup。看起来mousedown事件首先触发并干扰click事件处理程序。