关于js事件委托问题

/*这是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元素(什么也没有打印)？

小白在此先谢谢某大神帮解决！

慕丝0699092

浏览 896回答 0

关于js事件委托问题

0回答