0

我正在研究我在网上找到的一个小 js 谜题，其中指出要编写一些 js 以找到最接近鼠标单击事件的链接。我有一个好的开始，但我想知道社区是否可以帮助我找到改进它的方法。

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

我想就以下问题提供反馈：

  • 我的算法准确吗？有哪些陷阱？
  • 是否有更快、更好的方法来确定最近的链接？

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

<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>
4

1 回答 1

1

我想你必须决定你希望在哪里获得最佳性能 - onload 或 onclick。除非锚点会四处移动*，否则您可能会预先做一些工作，即使它只是设置页面中所有锚点及其位置的集合。然后，每次用户点击某个地方时，dom 都不必关闭并弄清楚这一点。

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

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

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

于 2013-08-15T01:12:10.157 回答