1.兼容ie8 主要是事件兼容
var EventUtil = { on:function(elem,type,handler){ if(elem.addEventListener){ elem.addEventListener(type,handler,false); }else if(elem.attachEvent){ elem.attachEvent("on"+type,handler); } }, getEvent:function(event){ return event||window.event; }, getTarget:function(event){ return event.target||event.srcElement; }, getCharCode:function(event){ if(typeof event.handler == "number"){ return event.charCode; }else{ return event.keyCode; } } }2.對于候選框里面的內容使用事件代理，以及點擊空白處消失
EventUtil.on(document.body,'click',function(e){ stopPropagation(e); if(EventUtil.getTarget(e).nodeName=='BODY'){ datalist.style.visibility = 'hidden'; datalist.innerHTML =''; } if(EventUtil.getTarget(e).nodeName == "LI"){ input.value = EventUtil.getTarget(e).innerHTML; datalist.style.visibility = 'hidden'; datalist.innerHTML =''; } })3.兼容模式下的防止冒泡
function stopPropagation(e){ e = window.event||e; if(document.all){ e.cancelBubble = true; }else{ e.stopPropagation(); } }4.效果圖
5.完整代碼
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> html,body{margin: 0;padding: 0;height: 100%;width: 100%;} input{ width: 200px; border:1px solid grey; padding: 0 2px; line-height: 1.5rem; box-sizing: border-box; outline: none; } ul{ margin:0; width: 200px; padding: 0; list-style: none; box-sizing: border-box; padding: 1px; border:1px solid; border-color: grey; visibility: hidden; } li{ line-height: 1.5rem; padding: 0 0 0 1px; } li:hover{ background-color: grey; } .section{ top:30%; left:50%; position: absolute; margin-left: -100px; } </style> </head> <body> <div class="section"> <input id="search"/> <ul id="datalist"> </ul> </div> </body> <script type="text/javascript"> var EventUtil = { on:function(elem,type,handler){ if(elem.addEventListener){ elem.addEventListener(type,handler,false); }else if(elem.attachEvent){ elem.attachEvent("on"+type,handler); } }, getEvent:function(event){ return event||window.event; }, getTarget:function(event){ return event.target||event.srcElement; }, getCharCode:function(event){ if(typeof event.handler == "number"){ return event.charCode; }else{ return event.keyCode; } } } function stopPropagation(e){ e = window.event||e; if(document.all){ e.cancelBubble = true; }else{ e.stopPropagation(); } } var input = document.getElementById('search'); var datalist = document.getElementById('datalist'); var list_array = ['aa','aab','abc']; function generatelist(array){ var _innerHTML = ''; for (var i = 0; i < array.length; i++) { _innerHTML += '<li>'+array[i]+'</li>'; } datalist.innerHTML = _innerHTML; } function findInArray(s){ var filter_array = []; if(s!=''){ for (var i = 0; i < list_array.length; i++) { if(list_array[i].indexOf(s)===0){ filter_array.push(list_array[i]) } } } return filter_array; } input.onkeyup = function(){ var new_array = findInArray(this.value); generatelist(new_array); if(new_array.length>0){ setTimeout(function(){datalist.style.visibility = 'visible';},0); }else{ setTimeout(function(){datalist.style.visibility = 'hidden';},0); } } EventUtil.on(document.body,'click',function(e){ stopPropagation(e); if(EventUtil.getTarget(e).nodeName=='BODY'){ datalist.style.visibility = 'hidden'; datalist.innerHTML =''; } if(EventUtil.getTarget(e).nodeName == "LI"){ input.value = EventUtil.getTarget(e).innerHTML; datalist.style.visibility = 'hidden'; datalist.innerHTML =''; } }) </script></html>新聞熱點
疑難解答
