clientY不显示正确的东西

我知道标题看起来有点奇怪，但我试图创建一个绘图应用程序。我有一个由36生成的JavaScript生成的表格，我试图做到这一点，只要你点击一个盒子，它就会将它染成黑色。下面是代码（在这里，因为他们是30×30像素不是它的行为怪异）clientY不显示正确的东西

var array = []; 
 
var body = document.body, tbl = document.createElement("table"); 
 
tbl.style.border = "1px solid black"; 
 
tbl.style.borderCollapse = "collapse"; 
 
tbl.setAttribute("border", "1px"); 
 
tbl.style.margin = "0px"; 
 
tbl.setAttribute("onClick", "color(event)"); 
 
var id = 1; 
 
for (var j = 0; j < 17; j++) { 
 
\t var row = tbl.insertRow(); 
 
\t row.setAttribute("id", id.toString()); 
 
\t id++; 
 
\t for (var ij = 0; ij < 36; ij++) { 
 
\t \t var cell = row.insertCell(); 
 
\t \t cell.style.width = "28px"; 
 
\t \t cell.style.height = "28px"; 
 
\t } 
 
} 
 
body.appendChild(tbl); 
 

 

 
function color(event) { 
 
\t var x = event.clientX; 
 
\t var y = event.clientY; 
 
\t console.log(x + " = x"); 
 
\t console.log(y + " = y"); 
 
\t console.log((x/30) + " = x/30"); 
 
\t console.log((y/30) + " = y/30"); 
 
\t x = Math.ceil(x/30); 
 
\t y = Math.ceil(y/30); 
 
\t if (x == 37) {x = 36} 
 
\t if (y == 18) {y = 17} 
 
\t console.log(x + "x after"); 
 
\t console.log(y + "y after"); 
 
\t document.getElementById(y.toString()).childNodes[x - 1].style.background = "black"; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Program</title> 
 
\t \t <style> 
 
\t \t \t body { 
 
\t \t \t \t margin: 0px; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="program.js"></script> 
 
\t \t <button onClick="calculate()"></button> 
 
\t </body> 
 
</html>

当我第10行中单击一个正方形，它的颜色是黑色。当我在靠近底部的一排点击它时，从第13行开始，它向上移动5格。另外，如果我点击一个广场的后半部分（从左侧或从顶部），它认为它是下一个广场！请帮忙！

来源

2015-09-15 zevee

尝试event.pageX && event.pageY – Eric

事件对象将包含一个链接到被单击的TD，您不需要搜索它。如果要搜索，请在计算偏移量时介意单元格的填充，边框和间距... – dandavis

另外，您没有设置表格的大小，是否没有注意到“像素”不是真的广场？而且表格不是从页面顶部开始的，在它之前有一个复选框。所以你需要从你的计算中减去表格的位置。 – Jan

正如已经在评论中提到的那样，您正在使这个问题比实际情况更加复杂。当您单击某个元素时，它会生成一个单击事件，其中包含对该事件所针对的元素的引用。在你的情况下，它已经引用了你想改变的td元素。

所以：只需使用event.target，你很好去。

/* Creating the table */ 
 
var array = []; 
 
var body = document.body, 
 
    tbl = document.createElement("table"); 
 
tbl.style.border = "1px solid black"; 
 
tbl.style.borderCollapse = "collapse"; 
 
tbl.setAttribute("border", "1px"); 
 
tbl.style.margin = "0px"; 
 
tbl.setAttribute("onClick", "color(event)"); 
 
var id = 1; 
 
for (var j = 0; j < 17; j++) { 
 
    var row = tbl.insertRow(); 
 
    row.setAttribute("id", id.toString()); 
 
    id++; 
 
    for (var ij = 0; ij < 36; ij++) { 
 
    var cell = row.insertCell(); 
 
    cell.style.width = "28px"; 
 
    cell.style.height = "28px"; 
 
    } 
 
} 
 
body.appendChild(tbl); 
 

 

 
function color(event) { 
 

 
    var node = event.target; 
 
    var parent = node.parentNode; 
 

 
    //Probably a tbody, but we don't care as long as it is the parent 
 
    var table = parent.parentNode; 
 

 
    var column = [].slice.call(parent.childNodes).indexOf(node); 
 
    var row = [].slice.call(table.childNodes).indexOf(parent); 
 

 
    console.log(column); 
 
    console.log(row); 
 

 
    node.style.background = "black"; 
 
}

编辑：既然你问如何更新阵列，我会在这个扩展位。你有一个DOM的参考。如果您需要跟踪特定项目是否为黑色，则可以在DOM中简单检查它的样式。无需为此保留一个全局数组。如果你对你有什么可用，或者（更好）使用documentation on MDN，请使用console.log(node)。

如果您需要阵列的原因不同，可以使用node.parentNode和node.childNodes方法。请注意，最后一种方法返回NodeList;它看起来像一个数组，但它实际上不是一个数组。为了使用特定于数组的特定函数，我们将它转换为一个数组，其中[].slice.call(NodeList)。您可以使用Array.prototype而不是[]。我无法确定它在某些浏览器中的行为是否有所不同。

来源

2015-09-15 18:12:29 Sumurai8

但我按了哪一个？就像，我也想记录下它是在612的一个黑色方块是1而不是0的数组中按下的，但我该如何找到我压出的那个？ – zevee

我已经用一些解释更新了答案。我会推荐阅读你使用的东西的文档，以了解你可以使用的东西。 – Sumurai8

clientY不显示正确的东西

回答

相关问题