/*这是html代码,css代码就不放了*/
<body>
<div id="search">
<span></span>
<form class="inputList">
<input type="text" placeholder="请选择游戏名称" value="">
<button>搜 索</button>
</form>
<ul>
<li><a href="javascript:;">地下城与勇士</a></li>
<li><a href="javascript:;">魔兽世界（国服）</a></li>
<li><a href="javascript:;">魔兽世界（台服）</a></li>
<li><a href="javascript:;">热血江湖</a></li>
<li><a href="javascript:;">神鬼传奇</a></li>
<li><a href="javascript:;">大话西游II</a></li>
<li><a href="javascript:;">QQ幻想世界</a></li>
</ul>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>//这是js代码
var oSearch = document.getElementById("search");
var oUl= oSearch.getElementsByTagName("ul")[0], aLi = oUl.getElementsByTagName("li");
var oInput = oSearch.getElementsByTagName("input")[0];
oInput.onfocus = oInput.onkeyup = function(){
var val = this.value.replace(/^ +| +$/g,"");
oUl.style.display = val.length > 0 ? "block" : "none";
}
document.body.onclick = function(e){
e = e || window.event;
e.target = e.target || e.srcElement;
console.log(e.target); //单击页面中的body区域，应该输出<body>...</body>,但是并没输出
//如果事件源是a元素，就将a元素的innerHTML值传递给input元素并隐藏ul，点击非事件源同样会隐藏ul
if(e.target.tagName.toLowerCase() === "a" && e.target.parentNode.parentNode.parentNode.id === "search"){
oUl.style.display = "none";
oInput.value = e.target.innerHTML;
return;
}
oUl.style.display = "none";
}
oInput.onclick = function(e){
e = e || window.event;
e.target = e.target || e.srcElement;
e.cancelBubble = true;
};问题：为什么我用e.target事件委托单击页面中的body区域没有打印出body元素(什么也没有打印)？小白在此先谢谢某大神帮解决！
添加回答
举报
0/150
提交
取消