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不顯示正確的東西

回答

相關問題