0

私はオンラインで見つけた小さなjsパズルに取り組んでおり、マウスクリックイベントへの最も近いリンクを見つけるためにいくつかのjsを書くように述べています。良いスタートを切れましたが、コミュニティがそれを改善する方法を見つけるのを手伝ってくれるかどうか疑問に思っていました.

私の基本的なアプローチは、基本的にすべてのリンクをループし、mouseclick イベントからの距離を把握し、次の反復まで、またはすべての要素が使い尽くされるまで保存することです。その場合、最も近い要素を返します。

次の点についてフィードバックをお願いします。

  • 私のアルゴリズムは正確ですか？落とし穴は何ですか？
  • 最も近いリンクを決定するためのより高速で優れたアプローチはありますか?

私が考えることができる 1 つの問題は、基本的にリンク要素の左上のポイントを使用して距離を決定していることですが、クリックが実際にリンク自体または要素の右下にあった場合はどうなるでしょうか? リンクは最も近い要素である必要がありますが、私の実装では、次のリンクがより近くにあり、誤った結果を引き起こす可能性があります。

<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 に答える