組織図のピクチャに追加されたホバーイベントの代わりにクリックイベントを追加する適切な方法は何ですか？

Question

私は、組織図にfloatイベントを持つ既存のコードを取ることを任されています。組織図の上にマウスカーソルを置くと、画像がポップアップし、その下のすべての従業員が表示されます。

彼らはそれを気に入らず、クリックイベントに変更したいと思います。私はfloatイベントのコードを列挙しましたが、contentFloatingを取ってクリックイベントにする例は何ですか？適切な構文を探してください。

} 
 
.orgContainer .contentStable .contentFloating img { 
 
    height: 720px; 
 
    width: 960px; 
 
} 
 

 
/* Float content */ 
 
.orgContainer .contentFloating { 
 
    border: 2px solid black; 
 
    display: none; 
 
    position: fixed; 
 
} 
 
.orgContainer .contentStable:hover .contentFloating { 
 
    display: block; 
 
    top: 7%; 
 
    left: 15%; 
 
}

<div class="contentStable"> 
 
    <img title="Scott Plemmons Director Supplier Quality Compliance" src="/sites/scm/utas_supp_qual/Home_Pictures/scott_plemmons.jpg" /> 
 
    <p> 
 
    Scott Plemmons<br/> Director 
 
    <br/> Supplier Quality 
 
    </p> 
 
    <div class="contentFloating"> 
 
    <img src="/sites/scm/utas_supp_qual/Home_Pictures/Org_Charts/Scott_Plemmons_Chart.jpg" /> 
 
    </div> 
 
</div>

Answer 1

これは、DOM要素にクリックイベントハンドラを追加し、あなたがそれをクリックすると、別のdivを表示させる方法の一例です。

HTML

<div class="orgchart">click for details</div> 
<div id="details">details</div> 

CSS

#details { 
    position:absolute; 
} 

javascriptの

let elements = document.getElementsByClassName("orgchart"); 
for(var i = 0; i < elements.length; i++) 
{ 
    elements[i].addEventListener("click", function(e){ 
     // get the position of the element that was clicked 
     let clickedItem = e.target; 
     var rect = clickedItem.getBoundingClientRect(); 
     // set the details div to that position and fill it with content 
      let details = document.getElementById("details"); 
     details.innerHTML = "Joe Average"; 
     details.style.left = (rect.left + 10) + "px"; 
     details.style.top = (rect.top + 20) + "px"; 
     }); 
} 

jsfiddle example hereをチェック