取消事件冒泡-select模拟（多选）

来源：互联网发布：sublime mac 汉化包编辑：程序博客网时间：2024/05/29 11:30
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style type="text/css">*{padding: 0; margin: 0;}li{list-style: none;}#main{width: 300px; margin: 0 auto; margin-top:100px;}#div1{width: 200px; height: 30px; line-height: 30px; text-align: left; border: 1px solid #000;}#ul1{ display: none;}#ul1 li{ width: 200px; height: 30px; line-height: 30px; text-align: left;border: 1px solid #000;}#ul1 .active{ background: #FF0;}</style><script type="text/javascript">window.onload = function(){var oDiv = document.getElementById('div1'),oUl = document.getElementById('ul1'),aLi = oUl.getElementsByTagName('li');oDiv.onclick = function(ev){var ev = ev || event;ev.cancelBubble = true;oUl.style.display = 'block';document.onkeydown = function(ev){var ev = ev || event;if(ev.keyCode == 17 ){for(var i = 0; i< aLi.length; i++){aLi[i].onclick = function(ev){var ev = ev || event;if(oDiv.innerHTML.indexOf(this.innerHTML)==-1){oDiv.innerHTML += ' ' + this.innerHTML;this.style.background = '#F00';}ev.cancelBubble = true;};}}};document.onkeyup = function(ev){var ev = ev || event;if(ev.keyCode == 17 ){for(var i = 0; i< aLi.length; i++){aLi[i].onclick = function(ev){var ev = ev || event;ev.cancelBubble = false;};}}};}document.onclick = function(){oUl.style.display = 'none';};for(var  i =0; i<aLi.length; i++){aLi[i].onmouseover = function(){this.className = 'active';};aLi[i].onmouseout = function(){this.className = '';};aLi[i].onclick = function(){oDiv.innerHTML = this.innerHTML;};}};</script></head><body><div id='main'>    <div id='div1'></div>    <ul id='ul1'>    <li>111</li>    <li>222</li>    <li>333</li>    <li>444</li>    <li>555</li>    <li>666</li>    </ul></div></body></html>
0 0