トリガイベントの要素にツールチップを従う方法

Question

私のコードにいくつか問題があります。基本的には、赤い球と座標のdivボックスがあります。

文書をクリックすると、div.ballは私がしたいところに行きますが、ボックスはその位置にとどまります。 2回目のクリック後、ボールはどこに移動し、ボックスはボールの前の位置に移動します。ボックスは、同じ位置をダブルクリックした後に移動します。

ボールの横のたびに表示される、ツールチップのような形になります。

あなたは私を助けることができますか？

function menuRoll(){ 
 
    var hidden_collapse = document.getElementById("hidden_collapse"); 
 
    hidden_collapse.classList.toggle("myStyle"); 
 
} 
 

 

 
function readPosition(ball){ 
 
    var rect = ball.getBoundingClientRect(); 
 
    var x = Math.round(rect.left) + "px"; 
 
    var y = Math.round(rect.top) + "px"; 
 
    coordinat.innerHTML = "Coordinates:"+ "<br>" + x + ", " + y; 
 
    coordinat.style.top = Math.round(rect.top) - 30 + "px"; 
 
    coordinat.style.left = Math.round(rect.left) + 37 + "px"; 
 
} 
 

 

 
window.onload = function(){ 
 
    var ball = document.getElementById('foo'); 
 
    var ball_space = document.getElementById('ball_space'); 
 
    var coordinat = document.getElementById("coordinat"); 
 
    document.addEventListener('click', function(e){ 
 

 
     ball.style.background = "#B40520"; 
 
     var ball_H = ball.offsetHeight; 
 
     var ball_W = ball.offsetWidth; 
 
     readPosition(ball); 
 
     ball.style.transform = 'translateY('+(e.clientY-(0.5*ball_H))+'px)'; 
 
     ball.style.transform += 'translateX('+(e.clientX-(0.5*ball_W))+'px)'; 
 

 
    }, true); 
 

 
};

#coordinat { 
 
    transition: all 1s; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    text-align: center; 
 
    right: 5px; 
 
    top: 5px; 
 
    width: 150px; 
 
    height: 30px; 
 
    padding: 5px 5px; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 0.8em; 
 
} 
 

 
#foo{ 
 
    margin: 2px; 
 
    border-radius: 50px; 
 
    width: 30px; 
 
    height: 30px; 
 
    /*background: #B40520;*/ 
 
    background: white; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    -moz-transition: transform 1s, background 1s; 
 
    -webkit-transition: transform 1s, background 1s; 
 
    -ms-transition: transform 1s, background 1s; 
 
    -o-transition: transform 1s, background 1s; 
 
    transition: transform 1s, background 1s; 
 

 
}

<div id="coordinat">Coordinates you will see!</div> 
 
<div id="ball_space"> 
 
    <div id="foo"></div> 
 
</div>

Answer 1

あなたは、ツールチップの位置のためのボールの位置を使用する代わりに、ツールチップの前の位置を読んでいる。また、スニペットに

function menuRoll(){ 
 
     var hidden_collapse = document.getElementById("hidden_collapse"); 
 
     hidden_collapse.classList.toggle("myStyle"); 
 
     } 
 
//readPosition(); 
 

 
     function readPosition(ball){ 
 
     //console.log(ball.clientY,ball.clientX); 
 
     var clientX = parseInt(ball.clientX); 
 
     var clientY = parseInt(ball.clientY); 
 
     if((clientX+150) > window.innerWidth){ 
 
      clientX -= 210; 
 
     } 
 
     coordinat.style.top = (clientY-37) + "px"; 
 
     coordinat.style.left = (clientX+30) + "px"; 
 
     document.getElementById('coordinat').innerHTML = "Coordinates:"+ "<br>"+ clientX+" X "+clientY; 
 
     } 
 

 

 
window.onload = function(){ 
 
    var ball = document.getElementById('foo'); 
 
    var ball_space = document.getElementById('ball_space'); 
 
    var coordinat = document.getElementById("coordinat"); 
 
    document.addEventListener('click', function(e){ 
 
    ball.style.background = "#B40520"; 
 
    var ball_H = ball.offsetHeight; 
 
    var ball_W = ball.offsetWidth; 
 
    ball.style.transform = 'translateY('+(e.clientY-(0.5*ball_H))+'px)'; 
 
    ball.style.transform += 'translateX('+(e.clientX-(0.5*ball_W))+'px)'; 
 
    readPosition(e); 
 
    }, true); 
 

 
};

#coordinat { 
 
    transition:all 1s; 
 
    border-radius: 5px; 
 
    position: absolute; 
 
    text-align: center; 
 
    right: 5px; 
 
    top: 5px; 
 
    width: 150px; 
 
    height: 30px; 
 
    padding: 5px 5px; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 0.8em; 
 
} 
 

 
#foo{ 
 
margin: 2px; 
 
border-radius:50px; 
 
width:30px; 
 
height:30px; 
 
/*background:#B40520;*/ 
 
background: white; 
 
position:absolute; 
 
top:0px; 
 
left:0px; 
 
-moz-transition: transform 1s, background 1s; 
 
-webkit-transition: transform 1s, background 1s; 
 
-ms-transition: transform 1s, background 1s; 
 
-o-transition: transform 1s, background 1s; 
 
transition: transform 1s, background 1s; 
 

 
}

<div id="ball_space"> 
 
     <div id="coordinat">Coordinates you will see!</div> 
 
    <div id="foo"></div> 
 
    </div>

を更新しました極端な権利をクリックするとツールチップを左に移動するコードが追加されました。 l自動的に左に移動

Answer 2

redPosition（）関数にボールの新しい位置を渡す必要があります。この関数はアニメーション後の位置を認識しないためです。あなたはJSFiddleで見つけることができるように、私は機能するために新しいボールの位置を渡すので、今それは適切に計算することができます。あなたの問題を解決するために

JS：

function menuRoll(){ 
     var hidden_collapse = document.getElementById("hidden_collapse"); 
     hidden_collapse.classList.toggle("myStyle"); 
     } 


     function readPosition(ball, yPos, xPos){ 
     var rect = ball.getBoundingClientRect(); 
     var x = Math.round(xPos) + "px"; 
     var y = Math.round(yPos) + "px"; 
     coordinat.innerHTML = "Coordinates:"+ "<br>" + x + ", " + y; 
     coordinat.style.top = Math.round(yPos) - 30 + "px"; 
     coordinat.style.left = Math.round(xPos) + 37 + "px"; 
     } 


window.onload = function(){ 
    var ball = document.getElementById('foo'); 
    var ball_space = document.getElementById('ball_space'); 
    var coordinat = document.getElementById("coordinat"); 
    document.addEventListener('click', function(e){ 

    ball.style.background = "#B40520"; 
    var ball_H = ball.offsetHeight; 
    var ball_W = ball.offsetWidth; 

    var ball_new_h = e.clientY-(0.5*ball_H); 
    var ball_new_w = e.clientX-(0.5*ball_W); 
    readPosition(ball, ball_new_h, ball_new_w); 
    ball.style.transform = 'translateY('+ ball_new_h +'px)'; 
    ball.style.transform += 'translateX('+ball_new_w+'px)'; 

    }, true); 

};