如何建立帶有斷開連接的輸入部分的標籤？

Question

我有一個基本的輸入和標籤：https://codepen.io/agrawalishaan/pen/QWBxBdK

span {
  border: 1px solid red;
}

<label for="myInput">
  I am a label! <span>icon</span>
</label>
<input id="myInput"/>

當我點擊標籤時，遊標設定在輸入內部，這是理想的。

我的標籤還包含一個資訊圖示。當我將滑鼠懸停在該圖示上時，會出現一個彈出視窗（因此我需要 hover 才能工作）。

在行動裝置上，沒有懸停，而是需要點擊。但是，當我點擊此圖示時，會出現彈出視窗並選擇輸入，如何在僅單擊該圖示時專門停用輸入選擇？

Answer 1

我新增了一些使用 event.preventDefault() 方法的 JavaScript，以確保在點擊圖示時輸入不會獲得焦點。

const infoIcon = document.querySelector('.info-icon');
const popup = document.querySelector('#popup');

infoIcon.addEventListener('click', function(event) {
  event.preventDefault(); // prevent default behavior of focusing on the input
  
//toggles the popup on click/touch of the icon
popup.style.display = popup.style.display === 'none' ? 'block' : 'none'
});

span {
  border: 1px solid red;
}

#popup {
   position:absolute;
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:yellow;
}

.info-icon:hover #popup { /*uses the ' ' adjacent child selector to display popup on hover*/
  display: block;
}

  I am a label! icon
  
POP UP