Clickイベント後に子要素の位置を取得する

Question

親要素内の子要素の位置を返すプログラムを作成したいが、問題がある。私は次のコードを書こうとしましたが、期待通りに動作しませんでした。位置値を返す代わりに、それはclickイベントを返しました。ここで私はやってみましたものです：
（私は生のJSでこの問題を解決することを望んでいたPS）

(function() { 
    // body... 

     var x = document.getElementsByClassName("bubble"); 

     for(var i=0; i<x.length; i++) { 

      x[i].addEventListener('click', function(i){ 


       console.log(i); 


      }); 



     } 

})(); 

HTML：あなたのリスナーの機能で

<div id=holder> 
<div class="bubble"></div> 
<div class="bubble"></div> 
<div class="bubble"></div> 
<div class="bubble"></div> 
</div> 

Answer 1

を次の手順を実行します。

1. 親のdiv（#holderは）あなたは、配列の位置にあるように位置を見つけたいと思っているならば、あなたは

   Array.prototype.indexOf.call(collection, element)

   を使用することができますoffsetLeftとoffsetTop

の

メイクの使用を配置されていることを確認してください

(function() { 
 
    // body... 
 
    var x = document.getElementsByClassName("bubble"); 
 

 
    for (var i = 0; i < x.length; i++) { 
 

 
    x[i].addEventListener('click', function(a) { // change the variable name here otherwise you have a local var i conflicting with the loop var i 
 

 
     console.log(this.offsetLeft, this.offsetTop); // this is the element clicked 
 
     
 
     console.log(Array.prototype.indexOf.call(x, this) + 1); // this is the position as an index (plus 1) 
 
    }); 
 
    } 
 

 
})();

#holder { 
 
    position:relative; /* position the parent */ 
 
}

<div id="holder"> 
 
    <div class="bubble">1</div> 
 
    <div class="bubble">2</div> 
 
    <div class="bubble">3</div> 
 
    <div class="bubble">4</div> 
 
</div>

Answer 2

iは、素子全体と彼のイベントを表しますforループのindexでは使用できません。ロギングすると、ブラウザがクラッシュ/ラグする可能性があります。

私はあなたにArray#forEachとES6の宝物を使用することをお勧めします。

const elems = document.querySelectorAll('#holder .bubble'); 
 

 
Array.from(elems).forEach((v, i) => v.addEventListener('click',() => { 
 
    console.log(`Child position: ${i}`); 
 
}));

<div id="holder"> 
 
    <div class="bubble">a</div> 
 
    <div class="bubble">b</div> 
 
    <div class="bubble">c</div> 
 
    <div class="bubble">d</div> 
 
</div>

ただし、あなたが本当に forループを使用したい場合は、あなたのリスナーの関数に引数を渡すと let iにあなたのループ内 var iを変更しないでください。

const x = document.getElementsByClassName("bubble"); 
 

 
for (let i = 0; i < x.length; i++) { 
 
    x[i].addEventListener('click', function() { 
 
    console.log(i); 
 
    }); 
 
}

<div id="holder"> 
 
    <div class="bubble">a</div> 
 
    <div class="bubble">b</div> 
 
    <div class="bubble">c</div> 
 
    <div class="bubble">d</div> 
 
</div>

Answer 3

あなたはこのfuncion使用することができます：あなたはx、y座標のような位置を見つけたいと思っている場合することができます、https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

https://jsfiddle.net/dt1224Ld/

(function() { 
// body... 

    var x = document.getElementsByClassName("bubble"); 

    for(var i=0; i<x.length; i++) { 

     x[i].addEventListener('click', function(i){ 

        var element = this.getBoundingClientRect(); 

      console.log(element.top, element.right, element.bottom, element.left); 


     }); 



    } 

})();