我知道標題看起來有點奇怪,但我試圖創建一個繪圖應用程序。我有一個由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格。另外,如果我點擊一個廣場的後半部分(從左側或從頂部),它認爲它是下一個廣場!請幫忙!
嘗試event.pageX && event.pageY – Eric
事件對象將包含一個鏈接到被單擊的TD,您不需要搜索它。如果要搜索,請在計算偏移量時介意單元格的填充,邊框和間距... – dandavis
另外,您沒有設置表格的大小,是否沒有注意到「像素」不是真的廣場?而且表格不是從頁面頂部開始的,在它之前有一個複選框。所以你需要從你的計算中減去表格的位置。 – Jan