移动端点击select控件时如何禁用弹出框并实现跨端一致功能？

我明白你的痛点——移动端点击原生<select>时，系统会直接弹出自带的下拉选择框，完全打断了你写的自定义点击逻辑，而且和桌面端的表现不一致。这是因为移动端浏览器给<select>控件加了高优先级的原生交互行为，咱们可以通过两种方式解决：

方法一：阻止原生弹窗，基于原生控件修改 #

这个方法适合不想大改代码的场景，核心是在触发原生弹窗的事件（touchstart/mousedown）上阻止默认行为，让自定义点击逻辑正常执行。

修改后的完整代码：

<select> 
  <option selected>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
  <option>5</option> 
</select>

body { margin: 20px 0 0 20px; } 

// 阻止移动端touch事件触发原生弹窗
document.addEventListener('touchstart', function(e) {
  const target = e.target;
  if (target.closest('select')) {
    e.preventDefault(); // 阻止原生下拉弹窗
  }
}, { passive: false }); // 必须设置passive为false，才能调用preventDefault

// 阻止桌面端mousedown事件触发原生下拉
document.addEventListener('mousedown', function(e) {
  const target = e.target;
  if (target.closest('select')) {
    e.preventDefault();
  }
});

// 保留你的自定义点击逻辑，新增自动移除提示的优化
document.addEventListener('click', function(e){ 
  let tar = e.target; 
  if(tar.closest('select')){ 
    let current = tar.options[tar.options.selectedIndex]; 
    let div = document.createElement('div'); 
    div.style.marginTop = '5px' 
    div.style.marginLeft = '40px' 
    
    if(current.hasAttribute('selected')){ 
      current.removeAttribute('selected'); 
      div.innerHTML = 'remove' 
    } else { 
      current.setAttribute('selected', ''); 
      div.innerHTML = 'add' 
    } 
    
    tar.after(div);
    // 1秒后自动移除提示，避免页面堆积
    setTimeout(() => div.remove(), 1000);
  } 
}); 

关键说明： #

• touchstart事件是移动端触发原生弹窗的第一步，在这里调用preventDefault()可以直接阻止弹窗弹出；
• 设置{ passive: false }是因为现代浏览器默认touchstart事件的passive为true，不允许调用preventDefault()，必须显式关闭；
• 同时监听mousedown是为了让桌面端也禁用原生下拉，保持跨端行为一致。

方法二：自定义模拟Select控件（更彻底的方案） #

如果想要完全摆脱原生控件的限制，实现100%一致的跨端体验，推荐用HTML/CSS/JS模拟一个Select控件，完全自定义交互和样式。

完整代码示例：

<div class="custom-select">
  <div class="select-trigger">1</div>
  <div class="select-options">
    <div class="option selected" data-value="1">1</div>
    <div class="option" data-value="2">2</div>
    <div class="option" data-value="3">3</div>
    <div class="option" data-value="4">4</div>
    <div class="option" data-value="5">5</div>
  </div>
</div>

body { margin: 20px 0 0 20px; }

.custom-select {
  position: relative;
  width: 150px;
}

/* 模拟Select的触发按钮 */
.select-trigger {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  font-size: 14px;
}

/* 模拟下拉选项容器 */
.select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  z-index: 10;
}

/* 显示下拉选项 */
.select-options.active {
  display: block;
}

/* 选项样式 */
.option {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}

/* 选中/hover状态 */
.option:hover, .option.selected {
  background-color: #f3f4f6;
}

const customSelect = document.querySelector('.custom-select');
const trigger = customSelect.querySelector('.select-trigger');
const optionsContainer = customSelect.querySelector('.select-options');
const options = customSelect.querySelectorAll('.option');

// 点击触发器切换下拉列表显示/隐藏
trigger.addEventListener('click', () => {
  optionsContainer.classList.toggle('active');
});

// 点击选项处理选中逻辑
options.forEach(option => {
  option.addEventListener('click', () => {
    // 移除之前的选中状态
    customSelect.querySelector('.option.selected').classList.remove('selected');
    // 设置当前选项为选中
    option.classList.add('selected');
    // 更新触发器显示文本
    trigger.textContent = option.textContent;
    
    // 执行你的自定义提示逻辑
    let tipDiv = document.createElement('div');
    tipDiv.style.marginTop = '5px';
    tipDiv.style.marginLeft = '40px';
    tipDiv.innerHTML = 'add'; // 这里可以根据你的逻辑调整
    customSelect.after(tipDiv);
    
    // 自动移除提示
    setTimeout(() => tipDiv.remove(), 1000);
    
    // 关闭下拉列表
    optionsContainer.classList.remove('active');
  });
});

// 点击页面其他区域关闭下拉列表
document.addEventListener('click', (e) => {
  if (!customSelect.contains(e.target)) {
    optionsContainer.classList.remove('active');
  }
});

这个方案的优势： #

• 完全不受原生控件的限制，移动端和桌面端表现完全一致；
• 样式可以完全自定义，适配你的项目设计；
• 交互逻辑可以灵活扩展，比如搜索、多选等功能。

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