键盘事件怎么处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换菜单</title>
		<link rel="stylesheet" type="text/css" href="11.css"/>
		<script src="11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<p id='pid'>请选择分类</p>
			<span class="img" id="img"></span>
		<ul class="dis" id="ul">
			<li>ASP开发</li>
			<li>.NET开发</li>
			<li>PHP开发</li>
			<li>Javascript开发</li>
			<li>Java特效</li>
		</ul>
		</div>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
div{
	width: 300px;
	margin: 3em auto;
	text-align: center;
}
p{
	border: 2px solid lightsteelblue;
	width: 300px;
	height: 1.2em;
	line-height: 1.2em;
}
ul{
	list-style: none;
	border: 2px solid lightsteelblue;
	border-top: none;
	width: 300px;
	height: 6em;
	line-height: 1.2em;
}
.dis{
	display: none;
}
.di{
	display: block;
}
.img{
	display: block;
	border: 2px solid lightsteelblue;
	height:1.2em;
	width: 1em;
	position: absolute;
	top: 3em;
	background: url(imgs/ptlogin.png) no-repeat top -1em left 5px;
	cursor: pointer;
}

window.onload=function(){
	aa()
};

function aa(){
	var span=document.getElementById('img');
	var ul=document.getElementById('ul');
	span.onclick=open;
	document.onclick=clear;
	li=ul.childNodes;
	for(var i=0;i<li.length;i++){
		li[i].onmouseover=show;
		li[i].onmouseout=hide;
		li[i].onclick=replace;
	}
	document.onkeydown=show_1; 
}
function open(event){
	event.stopPropagation();
		ul.className='di';
}
function clear(){
	ul.className='dis';
}
function show(){
	this.style.backgroundColor='gray';
}
function show_1(event){
	if(event.keyCode===13){
		clear();		
	}
	if(event.keyCode===40){
	li[0].style.backgroundColor='gray';
	}
	if(event.keyCode===38){
		
	}
}
function hide(){
	this.style.backgroundColor='white';
}
function replace(){
	pid=document.getElementById('pid');
	pid.innerHTML=this.innerHTML;
}

测试按键的时候li[0]为什么都无法读取

有没有一种好的方法可以更改this指向

清风流光

浏览 1609回答 3

3回答

zhangyudemuke

由于编写代码的时候有换行产生空节点，如果确定其他地方没有问题的话对代码进行压缩删除空文本节点，这样做的风险比较大，适合大神，麻烦一点的方法是对第一个节点进行验证，if(ul.childNodes[0].nodeType == 3 && ul.childNodes[0].nodeValue == ""){continue;}将这个代码放在for循环中试试看。

1 0

慕的地8582982

JFSVVQZJWKAAGAWQGDAFSYODJZZTNKYCZUXEPIWNMTQSGXNNNXBILSZADFGEXNUDTKBONICJTWFPMLUXARFUKNQGUWMNYVSHDNLWYBXIMBCZPMCZVSIDTQGJGRAXOKNEZPMWTJZISUYUXUQPYIMCMISHDIUQAJTPGBLHEFJSUXAEHHRBRUXBEAQZWMJAJMWZCLIKUMKMIYNKTQMPZPQGQHLHKSQGTOXBRADGISBTWZHEGQZBRBHDZITWMOYTXQGWMJKTCYBEAXMWMWFPFIZNWSCSBLVQAQNJGILVFBDTWWSOXAJMJYIZLGRBKTJAPMBRZPFPLUSUDMCLHRBXVFBXNKGGJAQZCEWSTIJZWZPFUMCTVZWMQBDZCLTPEPSOYUPZCXGVFILCKFVSBQHEBDGJLBYWSVXAQMILBSXNWFCLORTJSAPTHXAETPSWTPAUEUSVYVXVSADBYOYUXBCLCZORGJSPZCFNYTQTVEOLBXMWMJMJFISBDARUQFWFVTJFBRGXVEMJTKHCFVYNDTWMGKUKACFOQTXDTVYAKNJLCLRGDBLHJRUQNHEGQHRUKMKSTPXNYUDTVFPBUKEVESLHOLXTDVXVDGCYCYAEAQMOWZPSFUXMPFUSHEHFIMIYCXHWNXQTDZWTPFAFBDZWGPMWEGWHJTJSVQHDMPZBQFPYBFVDAKRNCMVFHXGWKZWZJNPUDZIYRHPMILAXMCMZPMWEMQGITWJYAROYTDSVSKGBTJYOEZQTQAJTILOXGKNRHPTWSIFIZVFHXNQZWTCMITVXIRHERUEHESUSWZVYGQGQAVSOEBDZRGKZCFJFJSIMPUEADSIKOEUXKGCYVSIXTXGSVEMVFOFAQTBQAUSBEUWHKCEBQADTWRIR

0 0

清风流光

第一个应该是空节点的问题 this指向怎么更改？

0 0

随时随地看视频慕课网APP