Can i track clicked tag name?

**rajug** · 03-11-2007, 05:05 AM

Hello there all,

I have tracked the click and its x and y coordinates. But now I want to track whether the clicked tag is anchor or not. I want to track the clicked x and y coordinates only if the clicked tag is anchor.

Is it possible to track the clicked tag name?

Help would be appreciable.

**jscheuer1** · 03-11-2007, 06:18 AM

Code:

document.onclick=function(e){
var e=e? e : window.event;
var targ=e.target? e.target : e.srcElement;
if(targ.tagName.toLowerCase()=='a')
alert('it\'s an anchor')
}

**rajug** · 03-11-2007, 06:59 AM

Thank you jscheuer1 for the code. I was not careful on my code before. But when i tried to find clicked X and Y coordinates the following code give me the different values in different clicks.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
	document.onclick = function(e){
		var posx = 0;
		var posy = 0;
		if(!e) var e = window.event;
		if(e.pageX || e.pageY){
			posx = e.pageX;
			posy = e.pageY;
		}
		else if (e.clientX || e.clientY){
			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		//var e = e ? e : window.event;
		var targ = e.target ? e.target : e.srcElement;
		if(targ.tagName.toLowerCase() == 'a')
		alert('It\'s an anchor\r\nX = ' + posx + '\r\nY=' + posy)
	}
</script>
</head>
<body style="margin:0px;">
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #006699 solid;">
  <tr>
    <td height="92" colspan="3" align="center" valign="middle" bgcolor="#006699">&nbsp;</td>
  </tr>
  <tr>
    <td width="145" height="460" align="left" valign="top" bgcolor="#006699">&nbsp;</td>
    <td colspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">
      
      <tr>
        <td colspan="4" align="left"><a href="javascript:void(null);">New Tab</a></td>
      </tr>
      <tr>
        <td width="100%" colspan="4" align="left">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="4" id="TabsCol"></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="20" colspan="3" bgcolor="#006699">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Please find the mistake that i had taken on this code. How can i track the exact x and y coordinates in at least two browsers IE and FF?

**jscheuer1** · 03-11-2007, 07:24 AM

You have the coords. They are for the click. Perhaps you want the x and y offset of the clicked element?

**rajug** · 03-11-2007, 07:31 AM

Oh yes exactly.

How can i do this?

Actually i also want to track the offset of the first element of the page. Suppose sometime if the page is 100% width the first element's offset x and y will 0 and if the page is centered with some specified size, then how can find that how far the first element is from the left so that i can track the offset of the clicked element only of inside the first element.

Could i make you understood what i mean to say?

**jscheuer1** · 03-11-2007, 07:40 AM

Code:

<script type="text/javascript">

	document.onclick = function(e){
	var curleft = curtop = 0;
var e=e? e : window.event;
var obj=e.target? e.target : e.srcElement;
	if (obj.offsetParent&&obj.tagName.toLowerCase() == 'a') {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
		alert('It\'s an anchor\r\nX = ' + curleft + '\r\nY=' + curtop)
	}
	}

</script>

**rajug** · 03-11-2007, 08:00 AM

Thank you very much jscheuer1. It worked.
I am sorry if i am expecting too much from you but how can i find that clicked element's offset values from the first element of the page not from the absolute left? Suppose table is the first element after body and the table has the width 780px that is centered. So i want to know the offset of the clicked element from that table not from the absolute left.

**rajug** · 03-12-2007, 05:03 AM

Is any one javascript expert caring about my post and problem there please? Please if anyone is known to this issue, help me out.

**jscheuer1** · 03-12-2007, 05:28 AM

I think that you already know that there is a bug in FF that prevents this being done in the usual manner with centered tables. FF sees the offsetLeft of a centered table as 0. It could probably be worked out for your layout though but, it would be specific to that (or that type of) layout.

**jscheuer1** · 03-12-2007, 05:44 AM

For instance, this works with the specific layout you used:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}
	document.onclick = function(e){
var e=e? e : window.event;
var obj=e.target? e.target : e.srcElement;
	if (obj.tagName.toLowerCase() == 'a') {
		var curleft = curtop = 0;
		var firstel=document.body.getElementsByTagName('*')[0];
firstel.offL=0;
if(findPos(firstel)[0])
firstel.offL=findPos(firstel)[0];
else if(window.innerWidth&&document.body.clientWidth)
firstel.offL=Math.round(document.body.clientWidth/2-firstel.width/2);
curleft=findPos(obj)[0]-firstel.offL, curtop=findPos(obj)[1]-findPos(firstel)[1]
		alert('It\'s an anchor\r\nX = ' + curleft + '\r\nY=' + curtop)
	}
	}

</script>
</head>
<body style="margin:0px;">
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #006699 solid;">
  <tr>
    <td height="92" colspan="3" align="center" valign="middle" bgcolor="#006699">&nbsp;</td>
  </tr>
  <tr>
    <td width="145" height="460" align="left" valign="top" bgcolor="#006699">&nbsp;</td>
    <td colspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2">
      
      <tr>
        <td colspan="4" align="left"><a href="javascript:void(null);">New Tab</a></td>
      </tr>
      <tr>
        <td width="100%" colspan="4" align="left">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="4" id="TabsCol"></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="20" colspan="3" bgcolor="#006699">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Thread: Can i track clicked tag name?

Thread Tools

Search Thread

Can i track clicked tag name?

Bookmarks

Bookmarks

Posting Permissions