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

kucao 2010-11-23 12:22:15

打算要做一个模拟的下拉菜单，一个文本框 + 一个图层，遇到问题是怎样让图层显示跟消失，就是当点击文本框的时候图层显示，当点击文本框以外的任何地方图层就隐藏，我用了两种方式都有弊端，
<input onblur="xx();"/> 这种方式肯定是不行，虽然点击任何文本框以外任何一个地方都可以触发 xx()函数，但是这种情况下我取不到具体点击了图层上的哪一行。

我的思路是：当鼠标点击时，我能知道鼠标点击的是界面上哪个对象，如果点击文本框，那么显示图层，如果点击图层某个区域就将图层上相应值赋给文本框，图层隐藏，如果点击图层和文本框之外的任何地方图层隐藏。

所以我必须知道鼠标现在点击的是哪个对象？

如果大家有其他更好的方法也请赐教。我知道现在有很多现成的模拟下拉菜单，但是因为自己要添加其他功能，现成的插件一个是臃肿在一个是修改起来也不方便，所以要自己做一个。

...全文

7091 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

unfirewall 2011-09-21

打赏
举报

<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这个东东。新手发言，不对的地方多包涵~

solid210 2010-12-15

打赏
举报

我是说3楼的

solid210 2010-12-15

打赏
举报

[Quote=引用 3 楼 cj205 的回复:]

引用 2 楼 hch126163 的回复:

HTML code

<!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/xh……
[/Quote]

最瞧不起这种装 B的人

Mr-Jee 2010-11-23

打赏
举报

[Quote=引用 2 楼 hch126163 的回复:]

HTML code

<!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></……
[/Quote]没这么麻烦 1楼的就可以了

hch126163 2010-11-23

打赏
举报



<!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>