來看一個簡單的下拉框例子
<!--html代碼-->
<body>
<input type="text">
<ul style="display:none;"> <!--為了節(jié)省空間這里采用了行內(nèi)樣式-->
<li>下拉列表1</li>
<li>下拉列表2</li>
<li>下拉列表3</li>
<li>下拉列表4</li>
<li>下拉列表5</li>
</ul>
</body>
分為如下幾個步驟：
- 首先需要獲取到三個元素
var input = document.querySelector('input');
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
- 一個下拉框在點(diǎn)擊的時候，下拉列表需要顯示
input.onclick=function(){
ul.style.display='block';
};
- 當(dāng)點(diǎn)擊下拉列表里面的內(nèi)容時浦译，下拉框會消失，點(diǎn)擊的內(nèi)容會顯示在下拉框內(nèi)
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
input.value=this.innerHTML;
ul.style.display='none';
};
};
以上步驟均正常運(yùn)行溯职，然后到了下一步
- 點(diǎn)擊頁面時精盅，下拉列表也會消失
document.onclick=fucntion(){
ul.style.display='none';
};
此時，由于在點(diǎn)擊了input后谜酒，在事件冒泡的過程中叹俏，遇到了document的點(diǎn)擊事件，并觸發(fā)了它的事件處理函數(shù)僻族，那么在頁面上的表現(xiàn)結(jié)果就是下拉框無法顯示了粘驰，這里我們就需要在點(diǎn)擊input的時候阻止事件冒泡
input.onclick=function(ev){
ul.style.display='block';
ev.cancelBubble=true;
};
這么個功能就做好了
