请问js如何取得鼠标当前点击的是页面上哪个对象？

打算要做一个模拟的下拉菜单，一个文本框 + 一个图层，遇到问题是怎样让图层显示跟消失，就是当点击文本框的时候图层显示，当点击文本框以外的任何地方图层就隐藏，我用了两种方式都有弊端，
<input onblur="xx();"/> 这种方式肯定是不行，虽然点击任何文本框以外任何一个地方都可以触发 xx()函数，但是这种情况下我取不到具体点击了图层上的哪一行。我的思路是：当鼠标点击时，我能知道鼠标点击的是界面上哪个对象，如果点击文本框，那么显示图层，如果点击图层某个区域就将图层上相应值赋给文本框，图层隐藏，如果点击图层和文本框之外的任何地方图层隐藏。所以我必须知道鼠标现在点击的是哪个对象？如果大家有其他更好的方法也请赐教。我知道现在有很多现成的模拟下拉菜单，但是因为自己要添加其他功能，现成的插件一个是臃肿在一个是修改起来也不方便，所以要自己做一个。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

获取鼠标点击的“目标对象”可以用event.target, IE下为event.srcElement
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type ="text/css">
    html,body{width:100%;height:100%}
    ul{padding:0px;margin:0px;list-style:none;}
    li{cursor:pointer;padding:0px 5px; line-height:25px;height:25px;}
    </style>
</head>
<body>
<p>
    <input type='text' id='txtInput'  onkeyup='getSearchKeys()'/>
    <div id='divShow' style="position:absolute; z-index:9999; width:200px; height:auto; display:none;border:1px solid #ddd">
    <ul>
    <li>aaa</li>
    </ul>
    </div>
    </p>
</body>
<script type="text/javascript">
var keys=['ada','sdfsd','bbb','sfga','dfhgfh','235s','dfew','ghjk','hjkghjk','fgjgfjf','fghjgfj','2345f','fthtr','sfgerw','tyerth','vnmu','wertewr','wert','asdfaf','zxcvd','gkju','dvfgdh','2354af','adsf','erterter','fghdfg','xvdfg','kjhu','qweasdas','xzce','werwre','zzczc','rtewtrew']; //  搜索值，可以用Ajax从数据库获取
var txtInput ;
var divShow ;
window.onload=function()
{
     txtInput =document.getElementById("txtInput");
     divShow = document.getElementById("divShow");
     var p =getAbsPoint(txtInput);
     divShow.style.left = p.x +'px';
     divShow.style.top = p.y + txtInput.offsetHeight + 'px';
   txtInput.onclick = divShow.onclick=function(e)
    {
         e = e||event;
         var t = e.target||e.srcElement        if(t.tagName.toLowerCase()=='li')
        {
          txtInput.value = t.innerHTML;
           divShow.style.display = "none";
           return;
        }
        if(e && e.stopPropagation){
          //W3C取消冒泡事件
          e.stopPropagation();
          }else{
          //IE取消冒泡事件
          window.event.cancelBubble = true;
          }
    };
    document.body.onclick=function(e)
    {
        divShow.style.display = "none";
    };
};
function getSearchKeys()
{
  var s= txtInput.value;
    if(s=='')
    {
        divShow.style.display = "none";
        return;
    }
      var arr=['<ul>'];
      for(var i=0;i<keys.length;i++)
      {
        if(keys[i].indexOf(s)>=0){
        arr.push('<li>'+keys[i]+'</li>');
        }
      }

      if(arr.length>1){
        arr.push('</ul>');
        divShow.innerHTML = arr.join('');
        divShow.style.display = "block";
      }else{
        divShow.style.display = "none";
      }
}function getAbsPoint(e)
{
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while(e = e.offsetParent)
    {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    return {"x": x, "y": y};
}
</script>
</html>
<HTML>
<HEAD>
<TITLE>取得鼠标所在位置的对象</TITLE>
</HEAD>
<script language="javascript">
function fnGetTable( oEl )
   {
try{
while( null != oEl && oEl.tagName!="TABLE" )
{
oEl = oEl.parentElement;
}
return oEl;
}
catch(e)
{
return null;
}
}
function pos()
{
try{
oElement = document.elementFromPoint(event.x,event.y);
oElement = fnGetTable(oElement);
if(oElement.tagName=="TABLE")
show.innerText=oElement.id;
}
catch(e)
{}
}
</script>
<BODY onmousemove="pos()">
<table border="1" cellpadding="" cellspacing="" width="" id="table1">
<tr>
<td>table1</td>
</tr>
</table>
<table border="1" cellpadding="" cellspacing="" width="" id="table2">
<tr>
<td>table2</td>
</tr>
</table>
<table border="1" cellpadding="" cellspacing="" width="" id="table3">
<tr>
<td>table3</td>
</tr>
</table>
<table border="1" cellpadding="" cellspacing="" width="" id="table4">
<tr>
<td>table4</td>
</tr>
</table>
<table border="1" cellpadding="" cellspacing="" width="" id="table5">
<tr>
<td>table5</td>
</tr>
</table>
<table border="1" cellpadding="" cellspacing="" width="" id="table6">
<tr>
<td>table6</td>
</tr>
</table>
鼠标当前在：<span id="show"></span>
</BODY>
</HTML>
找了个例子，给你参考下，但这个只能在IE内核下运行，因为：event.x这个东东。新手发言，不对的地方多包涵~