点击导航栏文本无法更新输入框值，求技术排查

问题根源 #

点击#1/#2等文本时输入框不更新，核心原因是点击元素被包裹在带有pointer-events: none样式的.placeholder标签内。这个CSS属性会完全阻止该元素及其子元素接收任何鼠标事件，导致onclick绑定的setExampleValue函数根本无法触发。

另外代码里存在一个小问题：两个<span>的id都是example3，属于重复id，不符合HTML规范，需要把第四个span的id改为example4。

修复方案 #

方案1：调整CSS，让点击元素可响应事件 #

保留当前HTML结构，修改CSS样式，给点击的.example元素恢复鼠标事件响应：

/* 保留.placeholder的pointer-events:none，仅让内部的.example可点击 */
.example {
  pointer-events: auto;
  cursor: pointer; /* 加上鼠标指针样式，提升交互体验 */
}

/* 或者直接移除.placeholder的pointer-events:none属性 */
.placeholder {
  color: #65657b;
  font-family: sans-serif;
  left: 20px;
  line-height: 14px;
  /* 移除这一行：pointer-events: none; */
  position: absolute;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 20px;
}

方案2：调整HTML结构，将点击元素移出不可交互容器 #

把带有点击事件的<span>从.placeholder标签中移出，放在输入框容器的其他位置，确保不在pointer-events: none的元素范围内：

<div class="input-container soura">
  <input id="examples" class="input" name="examples" placeholder="example1" />
  <div class="cut example-cut"></div>
  <label for="examples" class="placeholder">Examples</label>
  <!-- 将点击元素移到label外面 -->
  <div style="color: #65657b; padding-left: 20px; margin-top: 5px;">
    <span id="example1" class="example" onclick="setExampleValue('example1')"> #1</span>
    <span id="example2" class="example" onclick="setExampleValue('example2')"> #2</span>
    <span id="example3" class="example" onclick="setExampleValue('example3')"> #3</span>
    <span id="example4" class="example" onclick="setExampleValue('example4')"> #4</span>
  </div>
</div>

方案3：使用事件委托绑定点击事件 #

通过给父容器绑定事件委托，避免子元素被pointer-events影响：

// 替换原来的setExampleValue函数，添加事件委托代码
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.input-container.soura').addEventListener('click', function(e) {
    if (e.target.classList.contains('example')) {
      // 获取点击的span的id（注意先修正重复的id）
      const value = e.target.id;
      document.getElementById('examples').value = value;
    }
  });
});

同时需要移除span标签上的onclick属性，并修正重复的id。

内容的提问来源于stack exchange，提问作者Natasha