Safari中select元素click事件触发延迟问题及解决方案求助

这个问题确实是Safari的特有行为——它会等到下拉选项菜单关闭后才触发select元素的click事件，而Chrome和Firefox会在点击瞬间就触发。要实现点击时立即执行逻辑，同时满足你需要的click.stop.prevent要求，可以试试以下方案：

解决方案：改用mousedown事件触发核心逻辑，保留click.stop.prevent处理事件控制 #

Safari在点击select元素时，mousedown事件是在点击瞬间立即触发的（此时下拉菜单还未打开，select的value还是初始状态），我们可以利用这一点，将原本绑定在click上的业务逻辑转移到mousedown事件中，同时保留click.stop.prevent来实现stopPropagation和preventDefault的需求。

修改后的代码示例 #

<div id="app">
  <select @mousedown="runTest($event)" @click.stop.prevent v-model="selectedValue">
    <option value>select to check your browser</option>
    <option value="1">first</option>
    <option value="2">second</option>
  </select>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    selectedValue: ''
  },
  methods: {
    runTest(event) {
      // 注意：不要在这里调用preventDefault，否则会阻止下拉菜单展开
      // 如果需要停止事件传播，可以调用event.stopPropagation()
      if(event.target.value) {
        alert("It's too late to show an alert! I said on-clik stupid browser!");
      } else {
        alert("Alert on time! Good job dear browser!");
      }
      this.selectedValue = '';
    }
  }
})
</script>

原理说明 #

• mousedown事件：在所有主流浏览器（包括Safari）中，点击select元素的瞬间就会触发这个事件，此时下拉菜单还未展开，select的value保持初始值，完美符合你“立即触发”的需求。
• click.stop.prevent：保留这个绑定来实现你需要的阻止事件冒泡和默认行为，同时因为核心逻辑已经在mousedown中执行，即使Safari延迟触发click事件，也不会重复执行逻辑，还能满足你的代码约束。

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