Safari 不会按时触发选择元素上的单击事件

Question

Chrome 和 Firefox 在打开其选项菜单的同时触发选择元素上的单击事件，但 Safari 在选项菜单关闭之前不会触发事件。我需要单击事件在单击时立即触发，有什么解决方法吗？

我在 Safari 9 和 10 上进行了测试。这是小提琴： https: //jsfiddle.net/hafez/nm3170v5/

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

new Vue({
  el: "#app",
  data: {
        selectedValue: ''
  },
  methods: {
    runTest(event) {
      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 = '';
    }
  }
})

注意：在我的实际代码中，我必须stopPropagation并preventDefault通过使用click.stop.prevent，因此解决方案应该满足这个条件。

Answer 1

尝试mousedown代替click（小提琴）。

注意事项：

clickafaik 将在释放鼠标按钮时触发事件，而mousedown在按下鼠标按钮时触发事件。这可能是处理程序执行延迟的原因。