页面上有很多嵌套的div,点击鼠标怎么得到被点击的div的id

sunwindyang 2007-12-07 10:00:46

页面上有很多嵌套的div,我不知道他们的id,当点击鼠标的时候,得到被点击的div的id,如果该div没有id,那么取它外围最近的div的id
怎么办呢?没有思路

...全文

307 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

muxrwc 2007-12-07

打赏
举报

- -，我倒，注释忘记改了，这个原先是鼠标移动的时候检测经过的对象。。。不过把document.onmousemove改成document.onclick，就是检测鼠标按下时的对象了。。

muxrwc 2007-12-07

打赏
举报



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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>elementFromPoint|explicitOriginalTarget</title>

<script type="text/javascript">

/*

利用document.onmousemove方法检测鼠标移动

然后IE和OP都有document.elementFromPoint方法可以求出某点的对象

FF则可以用event.explicitOriginalTarget得出目前触发over的对象。。。

这样就得到了当前鼠标经过的对象。。。

*/

document.onclick = function (e) {

    var e = window.event || e;

    document.getElementById("status").innerHTML = (

        document.elementFromPoint ? document.elementFromPoint(

            e.clientX + document.documentElement.scrollLeft, e.clientY + document.documentElement.scrollTop

        ) : e.explicitOriginalTarget

    ).id;

};

</script>

</head>

<body>

<div id="status" style="background-color:#6699CC; border:#000000 1px solid;"></div>

    <div id="f1" style="width:100px; height:200px; background-color:#000000;">

        <div id="f11" style="width:50px; height:100px; background-color:#CCCCCC;"> </div>

    </div>

    <div id="f2" style="width:100px; height:50px; background-color:#FF0000;"> </div>

</body>

</html>

zlhran 2007-12-07

打赏
举报

以上方法是沒問題在部分瀏覽器是可行的，但有一下幾點注意
1，事實上還是要考慮下是否冒泡的因為常用瀏覽器一般都采用冒泡從類到外捕捉，但也有不少列外的
2，習慣上還是不要使用this對象，用event.target 或者event.srcElement.
3, 避免零級dom的應用，建議使用attachEvent或者addEventListener

hztgcl1986 2007-12-07

打赏
举报

用1楼的方法

斯洛文尼亚旅游 2007-12-07

打赏
举报

<html>

<head>

<meta http-equiv="http-content" content="text/html;charset=gb2312"/>

<title>测试</title>

<script>

//使用event对象

document.onclick=GetID;

function GetID(e)

{

  e=e?e:window.event;

  var tag=e.target?e.target:e.srcElement;

  if(tag.id)

   alert(tag.id);

  else

  {

    while(tag!=null)

    {

        if(tag.id)

        {

          alert(tag.id);

          break;

        }

        tag=tag.parentNode;

    }

  }

}

</script>

</head>

<body>

<div id="21">21

<div id="211">211</div>

<div id="213">213</div>

<div>212</div>

</div>

<div id="22">22</div>

<div id="23">23</div>

<div id="24">24</div>

</body>

</html>

tantaiyizu 2007-12-07

打赏
举报

所有div是别人写的,我不能要求别人把div里面加方法onclick等方法
比如 <div id="1"> <div id="2"> test click </div> </div>
当我点击test click的时候,得到id位2的div,

----

那好办



window.onload = function(){

		var oDiv = document.getElementsByTagName("div");

		for(var i=0;i<oDiv.length;i++){

			oDiv.setAttribute("onclick" ,function(){return ad(this)});

		}

	}

mrshelly 2007-12-07

打赏
举报



<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript">

	$(document).ready(function(){

		$("div").click(function(){

			alert($(this).parent().attr('id'));

			return false;

		});

	});

</script>





<div id="1">

	<div id="2">

		2

	</div>

	<div id="3">

		3

		<div id="4">

			4

		</div>

	</div>

</div>