javascript - Javascript：确定最近的元素

Question

我正在寻找使用标签元素（红色箭头）的 TextArea 元素（金色/黄色箭头）。我使用getBoundingClientRectapi 来查找页面上每个元素的中心。

注意我正在过滤页面上的特定输入元素和文本区域以及标签元素，以将我的搜索限制为页面上的特定元素。所以我过滤的元素只包括图中标有箭头的元素。

这是我尝试过的代码

//Label (Arrow Red in picture)
label_rect = $("label[for='textarea']").getBoundingClientRect()
//Calculating Center Coordinates
label_rect_x = label_rect.x + label_rect.width / 2 // X Coordinate
label_rect_y = label_rect.y + label_rect.height / 2 // Y Coordinate
// TextArea(Arrow Gold/Yellow in picture)
txbox_rect = $("#textarea").getBoundingClientRect()
//Calculating Center Coordinates
txbox_rect_x = txbox_rect.x + txbox_rect.width / 2 // X Coordinate
txbox_rect_y = txbox_rect.y + txbox_rect.height / 2  // Y Coordinate
// Calculating Distance two centers
txbox_rect_dis = Math.sqrt(
    (txbox_rect_x - label_rect_x) * (txbox_rect_x - label_rect_x) +
    (txbox_rect_y - label_rect_y) * (txbox_rect_y - label_rect_y)
    )
console.log(txbox_rect_dis)
//Number Box(Arrow Blue in picture)
numbox_rect = $("#in").getBoundingClientRect()
//Calculating Center Coordinates
numbox_rect_x = numbox_rect.x + numbox_rect.width / 2 // X Coordinate
numbox_rect_y = numbox_rect.y + numbox_rect.height / 2  // Y Coordinate
// Calculating Distance two centers
numbox_rect_dis = Math.sqrt(
    (numbox_rect_x - label_rect_x) * (numbox_rect_x - label_rect_x) +
    (numbox_rect_y - label_rect_y) * (numbox_rect_y - label_rect_y)
    )
console.log(numbox_rect_dis)

这段代码似乎适用于大多数用例，但最近我注意到图片中的这些元素，最近的元素被计算为数字框（图片中的蓝色箭头）而不是 textarea（图片中的金色箭头）。我真的无法弄清楚这里出了什么问题，或者这里是否有一些基本的问题需要修复？

标签： javascripthtmldom

Answer 1

所以解决方案是不添加宽度和高度来计算元素的中心。这是必要的，因为元素可能具有不同的大小，从而导致不可预测的行为