找到最接近的元素，单击并使用javascript设置其样式

我有一个循环，生成200个链接，并将它们随机放置在页面上。我试图使最近的链接在文档单击事件中更改颜色。因此，如果我单击空白，指向单击的壁橱链接将改变颜色。鉴于生成链接的以下代码，我如何实现这一点：

var links = "<a  class='links'" ;

for (var i=0; i<200; i++)
{
var randomnumber = Math.floor((Math.random()*1001)+1);
document.write(links+"href='#'"+"style="+'"'+"left:"+randomnumber+'px;"'+"id="+i+">links</a><br>");
}

var links=“
”；
}

除了特定的代码示例之外，任何关于如何在概念上做到这一点的广泛想法都将受到赞赏。我已经探索了在点击时捕获clientX和clientY坐标，但是接下来我如何以清晰和逻辑的方式与所有链接的坐标进行比较，并从点击中确定最接近的一个

*我不局限于使用循环来生成链接，但我希望尽可能保持简洁

---

提前感谢。

我已经在fiddle创建了示例代码。在这里使用jquery，这只是一个简单的例子。根据您的需要进行改进。请检查一下

$（文档）.ready（函数（）{
var链接=”）；
}
$（'.linkcont'）。在（'click'，function（）上{
var a=$（this.find（'a'）；
var id=a.attr（'id'）；
a、 css（‘颜色’，‘f00’）；
警报（id）；
}) ;
});

看：）

很抱歉，当我去JSFIDLE时，没有看到前面的答案，如果 这是一个糟糕的答案

 $("div").on('click', function(e) {
       var clkTop = e.pageY - this.offsetTop;
         $("a").each(function() {
               var aTop  = $(this).position().top,
               aLeft = $(this).position().left;

               var d = Math.sqrt((
                  Math.pow(
                      (e.pageX - aLeft), 2) +
                  Math.pow(
                       (e.pageY - aTop), 2) 
               ));

               if (d <= 70 && d >= -70) {
                  $("#putlinktext").text($(this).text());
                   if ($(this).css('color') == 'rgb(255, 0, 0)') {
                          $(this).css('color', 'rgb(0, 255, 255)')
                   } else {
                          $(this).css('color', 'rgb(255, 0, 0)')
                   }
               }
         });
      });

$（“div”）。在（'click'，函数（e）{
var clkTop=e.pageY-this.offsetTop；
$（“a”）。每个（函数（）{
var top=$（this）.position（）.top，
aLeft=$（this）.position（）.left；
var d=Math.sqrt((
数学战俘(
（e.pageX-aLeft），2）+
数学战俘(
（e.pageY-顶部），2）
));
如果（d=-70）{
$（“#putlinktext”）.text（$（this.text（））；
if（$（this.css（'color'）='rgb（255,0,0'））{
$（this.css（'color'，'rgb（0255255）'））
}否则{
$（this.css（'color'，'rgb（255,0,0'））
}
}
});
});

---

我再次为代码混乱感到抱歉。

您能发布页面地址吗，这样我就不会无意中碰到它；）。虽然页面听起来很恐怖，但问题本身很有趣。还有人问它…检查我的答案，它符合你的需要。我记得

document.write（）

不再在JSFIDLE上工作，你需要更新你的代码。@Teemu当我在FIDLE上运行脚本时，它工作得很好。我编辑它的任何方式：-）我认为这是有效的，因为

span

s有

display:block设置。链接覆盖了整个页面，没有其他元素可单击：（。虽然这样做有效，因为链接是左对齐的，并且您单击的哪个div将包含该链接。但是，它不会选择与单击点最近的链接，只选择单击了哪个div的链接。
 $("div").on('click', function(e) {
       var clkTop = e.pageY - this.offsetTop;
         $("a").each(function() {
               var aTop  = $(this).position().top,
               aLeft = $(this).position().left;

               var d = Math.sqrt((
                  Math.pow(
                      (e.pageX - aLeft), 2) +
                  Math.pow(
                       (e.pageY - aTop), 2) 
               ));

               if (d <= 70 && d >= -70) {
                  $("#putlinktext").text($(this).text());
                   if ($(this).css('color') == 'rgb(255, 0, 0)') {
                          $(this).css('color', 'rgb(0, 255, 255)')
                   } else {
                          $(this).css('color', 'rgb(255, 0, 0)')
                   }
               }
         });
      });