个人中心
gpt4 book ai didi

javascript - clientY 没有显示正确的东西

转载 作者：行者123 更新时间：2023-11-27 23:38:49 26 4
gpt4 key购买 nike

我知道标题看起来有点奇怪，但我正在尝试创建一个绘图应用程序。我有一个 17 x 36 的 javascript 生成的表格，我正在尝试制作它，以便无论何时单击一个框，它都会将其着色为黑色。下面是代码(这里表现得更奇怪，因为它们不是 30 x 30 像素)

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 x = event.clientX;
	var y = event.clientY;
	console.log(x + " = x");
	console.log(y + " = y");
	console.log((x/30) + " = x/30");
	console.log((y/30) + " = y/30");
	x = Math.ceil(x / 30);
	y = Math.ceil(y / 30);
	if (x == 37) {x = 36}
	if (y == 18) {y = 17}
	console.log(x + "x after");
	console.log(y + "y after");
	document.getElementById(y.toString()).childNodes[x - 1].style.background = "black";
}
<!DOCTYPE html>
<html>
	<head>
		<title>Program</title>
		<style>
			body {
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<script src="program.js"></script>
		<button onClick="calculate()"></button>
	</body>
</html>

当我单击第 10 行中的一个方 block 时，它会变成黑色。当我在靠近底部的一行中单击它时，从第 13 行开始，它会向上移动 5 个方格。此外，如果我单击一个正方形的后半部分(从左侧或顶部)，它会认为它是下一个正方形!请帮忙!

最佳答案

正如评论中已经提到的，您使这个问题比实际情况更复杂。当您单击一个元素时，它会生成一个单击事件，其中包含对该事件所针对的元素的引用。在您的情况下，它已经引用了您要更改的 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 中检查它的样式。无需为此保留全局数组。如果您对可用的内容感到好奇，请使用 console.log( node )，或者(更好)使用 documentation on MDN .

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

关于javascript - clientY 没有显示正确的东西，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32592678/

26 4 0
文章推荐： javascript - 如何动态选择动态添加的选择/选项标签的选项
文章推荐： javascript - 并行开发的目录结构: Dart and Javascript
文章推荐： html - 水平显示元素而不是列
文章推荐： html - 根据子元素的文本自动调整芯片组件(div)的宽度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com