Question

我正在研究我在网上找到的一个小js拼图，该拼图写了一些js来找到最接近鼠标点击事件的链接。我有一个良好的开端，但我想知道社区是否可以帮助我找到改进它的方法。

我的基本方法是基本循环遍历所有链接，找出它们与鼠标点击事件的距离，然后存储它直到下一次迭代或所有元素都已用尽，在这种情况下，我将返回最接近的元素。

我想了解以下内容：

我的算法准确吗？有什么陷阱？
确定最近的链接是否有更快，更好的方法？

我能想到的一个问题是我基本上使用链接元素的左上角来确定距离，但是如果点击实际上在链接本身或元素的右下方怎么办？链接应该是最接近的元素，但是对于我的实现，下一个链接可能更接近并触发不正确的结果。

<body>

<p><a href="" id="1">link 1</a></p>
<p><a href="" id="2">link 2</a></p>

<script>
  window.FindNearestElementToBodyClick = {
    init: function() {
      document.addEventListener("click", this.findElementClosestToClick, true);
    },

    findElementClosestToClick: function(e) {
      var x = e.x;
          y = e.y;

      var elems = document.body.getElementsByTagName("a"),
          closestElem = {};

      for(var i = 0; i < elems.length; i++) {
        var eX = elems[i].offsetLeft,
            eY = elems[i].offsetTop;

        var diff = Math.sqrt((Math.abs(eX - x)*2) + (Math.abs(eY-y)*2));

        if(closestElem.e == undefined) {
          closestElem.e = {e: elems[i], diff: diff};
        }

        if( diff < closestElem.diff ) 
          closestElem.e = {e: elems[i], diff: diff};
      }

      console.log(closestElem);
    }
  }

  FindNearestElementToBodyClick.init();
</script>
</body>

Answer 1

我猜你必须决定你希望表现最佳的地方 - onload或onclick。除非锚点要移动*你可以预先做一些工作，即使它只是为了设置页面中所有锚点及其位置的集合。然后，每当用户点击某个地方时，dom就不必离开并想出来。

理论上，每个锚点在页面中都有一个区域，其中任何一个点击距离它最近（如果有意义）并且这些区域是静态的（假设锚点不移动*）。您可以将这些区域设置为onload，然后每次单击都可以直接映射到正确的锚点。

但这可能不值得付出额外的努力。你所拥有的东西对我来说似乎非常明智 - 除非有大量的锚点和/或硬件非常糟糕（可能是移动设备，但你确实说过点击）。

*流体布局/动态内容等会使该假设无效。您可以查看调整大小事件并在移动内容时更新区域/集合。

查找最接近点击的链接元素

1 个答案: