为什么隐形FORM标签有offSetLeft == 8 ?? [英] Why does an invisible FORM tag have offSetLeft == 8??
问题描述
请原谅，这是一个相当复杂的问题，很可能
要求您将下面的文件保存到文件中并在浏览器中打开。
I使用Mozilla 1.5，所以我在下面描述的问题应该是
至少可以用该版本重现。
背景：
= ==========
当您在浏览器中打开此页面时，您将看到一个4单元格表格。
单元格包含以下项目分别为：
1）灰色背景
2）粉红色背景显示当前鼠标X位置
3）白色背景显示X - 细胞＃1左边缘的一线
4）黄色背景显示从细胞＃1到
树到根节点的节点遍历
我需要动态计算灰色框的左边缘的X-coord值。通过将鼠标放在灰色框的左边缘，
并观察粉红色单元格中的值，您可以找出
正确的内容。价值应该是。
我计算灰色单元格左边缘的X-coord的方式是
走上树直到我点击root，累计offSetLeft
值。从理论上讲，这应该给我的细胞的x-coord值
。这是您在白色单元格中看到的值。在黄色
单元格中，您可以看到沿途的每个节点及其偏移值。
问题：
=== =====
现在问题在于：正确值和计算值
不同（大约10 VS 18）。我想弄明白为什么。我发现
FORM标签为计算值增加了8个像素....即使它它是完全不可见的并且不会影响实际的屏幕显示/>
子节点的放置。您可以通过删除
表单标签来自行尝试。
那么有谁知道如何解决这个问题？为什么
隐形表格标签增加了8个像素？是否有一些替代/更简单的方法来获得元素左边缘的X坐标？
--------- -------------------------------------------------- -------------
< HTML>
< HEAD>
< SCRIPT language =" JavaScript1.2">
<！ -
var IE = document.all？true：false;
//如果NS - 即！IE - 然后设置为鼠标捕获
if（！IE）document.captureEvents（Event.MOUSEMOVE）
//设置使用getMouseXY函数onMouseMove
document.releaseEvents（Event.MOUSEMOVE）;
document.onmousemove = getMousePos;
//用于保存鼠标的临时变量xy pos.s
var mouseX = 0
//主要功能检索鼠标xy pos.s
函数getMousePos（e）{
如果（IE）//抓取x pos.s如果浏览器是IE
mouseX = event.clientX + document.body.scrollLeft;
else / /抓取x pos.s如果浏览器是NS
mouseX = e.pageX;
//在NS4中捕获可能的负值
if（mouseX< 0）{mouseX = 0}
document.getElementById（''MOUSE_XPOS''）。childNodes [0] .data = mouseX;
返回true;
}
函数getLeftXCoord（元素）
{
currElement = element;
xOffSet = 0;
document.getElementById（''TRAVERSAL_TEXT''）。childNod es [0] .data =
''\ tTag = ''+ currElement.tagName +''，\ tOffset =''+ currElement.offsetLeft
+''，\ tCummulative Offset =''+ xOffSet +''\ n'';
while（currElement.parentNode！= null）
{
xOffSet + = currElement.offsetLeft;
currElement = currElement.parentNode;
document.getElementById（''TRAVERSAL_TEXT''）。childNod es [0] .data
+ =''\ tTag =''+ currElement.tagName +''，\ tOffset =''+
currElement.offsetLeft +''，\ tCummulative Offset =''+ xOffSet +''\ n'';
}
// alert（xOffSet +'';''+ element.scrollTop）
// alert（xOffSet +''|''+ window .status）;
返回xOffSet;
}
// - >
< / SCRIPT>
< / HEAD>
< FORM name =" myForm">
< ; BODY>
< table border = 1>
< TR>
< TD
bgcolor =" grey"
name =" TABLE_CELL"
id =" TABLE_CELL"
Please excuse me, this is a fairly involved question that will likely
require you to save the file below to a file and open it in a browser.
I use Mozilla 1.5, so the problem I describe below should be
reproducible with that version at least.
BACKGROUND:
===========
When you open this page in your browser, you will see a 4 cell table.
The cells contain the following items respectively:
1) Gray background
2) Pink background showing the current mouse X position
3) White background showing the X-coord of the left edge of Cell #1
4) Yellow background showing a traversal of nodes from Cell #1 up the
tree to the root node
I need to dynamically calculate the X-coord value of the left edge of
the gray box. By placing the mouse on the left edge of the gray box,
and observing the value in the Pink cell, you can find out what the
"correct" value should be.
The way I calculate the X-coord of the left edge of the Gray cell is
to walk up the tree till I hit the root, accummulating the offSetLeft
values along the way. In theory this should give me the x-coord value
of my cell. This is the value you see in the White cell. In the yellow
cell, you see each node along the way and its offset value.
PROBLEM:
========
Now here is the issue: The "correct" value and the computed value
differ (approx 10 VS 18). I am trying to figure out why. I have found
that FORM tag adds 8 pixels to the computed value.... even though it
is completely invisible and doesn''t affect the actual onscreen
placement of its child nodes. You can try it yourself by removing the
form tag.
So does anyone know how to get around this issue? Why does an
invisible form tag add 8 pixels? Is there some alternate/easier way to
get the X coord of the left edge of an Element??
------------------------------------------------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript1.2">
<!--
var IE = document.all?true:false;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePos;
// Temporary variables to hold mouse x-y pos.s
var mouseX = 0
// Main function to retrieve mouse x-y pos.s
function getMousePos(e) {
if (IE) // grab the x pos.s if browser is IE
mouseX = event.clientX + document.body.scrollLeft;
else // grab the x pos.s if browser is NS
mouseX = e.pageX;
// catch possible negative values in NS4
if (mouseX < 0){mouseX = 0}
document.getElementById(''MOUSE_XPOS'').childNodes[0].data = mouseX;
return true;
}
function getLeftXCoord(element)
{
currElement = element;
xOffSet = 0;
document.getElementById(''TRAVERSAL_TEXT'').childNod es[0].data =
''\tTag='' + currElement.tagName + '',\tOffset='' + currElement.offsetLeft
+ '',\tCummulative Offset='' + xOffSet + ''\n'';
while (currElement.parentNode != null)
{
xOffSet += currElement.offsetLeft;
currElement = currElement.parentNode;
document.getElementById(''TRAVERSAL_TEXT'').childNod es[0].data
+= ''\tTag='' + currElement.tagName + '',\tOffset='' +
currElement.offsetLeft + '',\tCummulative Offset='' + xOffSet + ''\n'';
}
// alert(xOffSet + ''; '' + element.scrollTop)
// alert(xOffSet + '' | '' + window.status);
return xOffSet;
}
//-->
</SCRIPT>
</HEAD>
<FORM name="myForm">
<BODY>
<table border=1 >
<TR>
<TD
bgcolor="gray"
name="TABLE_CELL"
id="TABLE_CELL"
Gray Box
< / TD>
< / TR>
< TR>
< TD bgcolor =" ;粉红色">鼠标X位置：< PRE
name =" MOUSE_XPOS" id =" MOUSE_XPOS"> 0< / PRE>
< / TD>
< / TR>
< TR> ;
< TD>灰盒的左边缘：& nbsp;
< input
type =" text"
value =" xxx"
name =" TABLE_TEXT"
id =" TABLE_TEXT"
onMouseOver =" javascript ：getElementById（''TABLE_TEXT''）。value =
getLeftXCoord（document.getElementById（''TABLE_CELL''））;"
Gray Box
</TD>
</TR>
<TR>
<TD bgcolor="pink">Mouse X Position: <PRE
name="MOUSE_XPOS" id="MOUSE_XPOS">0</PRE>
</TD>
</TR>
<TR>
<TD>Left Edge of Gray Box:
<input
type="text"
value="xxx"
name="TABLE_TEXT"
id="TABLE_TEXT"
onMouseOver="javascript:getElementById(''TABLE_TEXT '').value =
getLeftXCoord(document.getElementById(''TABLE_CELL'' ));"
< / TD>
< / TR>
< TR>
< TD bgcolor ="黄色>>树从灰盒子遍历到
Root：< BR>
< PRE name =" TRAVERSAL_TEXT"
id =" TRAVERSAL_TEXT"> XXX< / PRE>
< / TD>
< / TR>
< / TABLE>
< / BODY>
< / FORM>
< / HTML>
</TD>
</TR>
<TR>
<TD bgcolor="yellow">Tree Traversal from Gray Box to
Root: <BR>
<PRE name="TRAVERSAL_TEXT"
id="TRAVERSAL_TEXT">XXX</PRE>
</TD>
</TR>
</TABLE>
</BODY>
</FORM>
</HTML>
推荐答案
2004年2月26日12:56:25 -0800，Saqib Ali< sy ************ @ yahoo.com>写道：
On 26 Feb 2004 12:56:25 -0800, Saqib Ali <sy************@yahoo.com> wrote:
请原谅，这是一个相当复杂的问题，可能会要求您将下面的文件保存到文件中并在浏览器中打开它。我使用的是Mozilla 1.5，所以我在下面描述的问题应该至少可以与该版本重现。
Please excuse me, this is a fairly involved question that will likely
require you to save the file below to a file and open it in a browser.
I use Mozilla 1.5, so the problem I describe below should be
reproducible with that version at least.
[snip]
你的表格是不可见的 - 它是无效的。
你不能指望JavaScript或CSS在他们操作时表现正常
无效的HTML。首先验证您的页面，然后重新测试。
您可以在以下位置使用W3C验证器：
http://validator.w3.org/
Mike
-
Michael Winter
M。***** *@blueyonder.co.inva 盖子（将.invalid替换为.uk以回复）
[snip]
Your form isn''t invisible - it''s invalid.
You can''t expect JavaScript or CSS to behave properly when they operate on
invalid HTML. Validate your pages first, then re-test.
You can use the W3C validator at:
http://validator.w3.org/
Mike
--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
[此后续内容发布到comp .lang.javascript和副本被发送到
被引用的作者。]
2004年2月26日星期四14:42:17 -0800（太平洋标准时间），Saqib Ali
< sy ************ @ yahoo.com>写道：
[This followup was posted to comp.lang.javascript and a copy was sent to
the cited author.]
On Thu, 26 Feb 2004 14:42:17 -0800 (PST), Saqib Ali
<sy************@yahoo.com> wrote:
你的帖子下面没什么帮助。
我尝试使用你指定的验证器但它没有告诉我需要对我的文件进行哪些具体更改才能使其通过。
顺便提一下，我给验证器提供了以下HTML
并且它说它也是无效的。
< HTML>
< HEAD>
< / HEAD>
< BODY>
Hello World
< / BODY>
< / HTML>
Your post below isn''t much help.
I tried using the validator that you specified but it
didn''t tell me what specific change I need to make to
my file to make it pass.
Incidentally, I gave the validator the following HTML
and it said it was invalid as well.
<HTML>
<HEAD>
</HEAD>
<BODY>
Hello World
</BODY>
</HTML>
这是因为* *是无效的HTML。有效的HTML文档需要DOCTYPE
声明，默认字符集（有时由
服务器自动发送），以及HEAD块中的TITLE元素。
这是我的默认模板[1]。
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< meta http-equiv =" Content-Type"
content =" text / html; charset = iso-8859-1">
< meta http-equiv =" Content-Script-Type" content =" text / javascript">
< meta http-equiv =" Content-Style-Type" content =" text / javascript">
< title> Untitled< / title>
< / head>
< body>
< / body>
< / html>
但是，根据你发布到新闻组的帖子，你将不得不使用
过渡DOCTYPE，它允许元素和属性，如FONT和
bgcolor。 Transitional DOCTYPE是：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http ：//www.w3.org/TR/html4/loose.dtd">
Mike
[1]现状，它也不会验证，但那只是因为
BODY部分没有内容。
-
Michael Winter
M.******@blueyonder.co.inva lid（将.invalid替换为.uk以回复）
That''s because it *is* invalid HTML. Valid HTML documents need a DOCTYPE
declaration, a default character set (sometimes sent automatically by the
server), and a TITLE element in the HEAD block.
Here is my default template[1].
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/javascript">
<title>Untitled</title>
</head>
<body>
</body>
</html>
However, based on your post to the newsgroup, you will have to use the
Transitional DOCTYPE which allows elements and attributes such as FONT and
bgcolor. The Transitional DOCTYPE is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Mike
[1] As it stands, it won''t validate either, but that''s only because the
BODY section has no content.
--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Michael Winter写道：
Michael Winter wrote:
[This后续发布到comp.lang.javascript并将副本发送给引用作者。]
2004年2月26日星期四14:42:17 -0800（太平洋标准时间），Saqib阿里
< sy ************ @ yahoo.com>写道：
[This followup was posted to comp.lang.javascript and a copy was sent to
the cited author.]
On Thu, 26 Feb 2004 14:42:17 -0800 (PST), Saqib Ali
<sy************@yahoo.com> wrote:
你的帖子下面没什么帮助。
我尝试使用你指定的验证器但它没有告诉我需要对我的文件进行哪些具体更改才能使其通过。
顺便提一下，我给验证器提供了以下HTML
并且它说它也是无效的。
< HTML>
< HEAD>
< / HEAD>
< BODY>
Hello World
< / BODY>
< / HTML>
那是因为* *是无效的HTML。有效的HTML文档需要DOCTYPE
声明，默认字符集（有时由服务器自动发送），以及HEAD块中的TITLE元素。
Your post below isn''t much help.
I tried using the validator that you specified but it
didn''t tell me what specific change I need to make to
my file to make it pass.
Incidentally, I gave the validator the following HTML
and it said it was invalid as well.
<HTML>
<HEAD>
</HEAD>
<BODY>
Hello World
</BODY>
</HTML>
That''s because it *is* invalid HTML. Valid HTML documents need a DOCTYPE
declaration, a default character set (sometimes sent automatically by
the server), and a TITLE element in the HEAD block.
我在这里可能会出错，但我似乎回想起一场辩论，我相信
ciwah，并且发现HTML中唯一需要的标签是
标题标签，其余是可选的。 Validator需要DTD进行
验证。或者至少这是我对它的理解。
这是我的默认模板[1]。
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< meta http-equiv =" Content-Type"
content =" text / html; charset = iso-8859-1">
< meta http-equiv =" Content-Script-Type" content =" text / javascript">
< meta http-equiv =" Content-Style-Type" content =" text / javascript">
I could be dead wrong here, but I seem to recall a debate, I believe in
ciwah, and the only tag that was found to be required in HTML was the
title tag, the rest are optional. The Validator requires the DTD for
validation purposes. Or at least thats my understanding of it all.
Here is my default template[1].
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/javascript">
这是一个错字吗？ Content-Style-text of text / javascript？
-
Randy
机会有利于准备好的心灵
comp.lang.javascript常见问题 - http://jibbering.com/faq/
Is that a typo? Content-Style-Type of text/javascript?
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/
这篇关于为什么隐形FORM标签有offSetLeft == 8 ??的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
