Safari在选择元素上没有及时触发点击事件

Question

Chrome和Firefox在打开select元素的选项菜单时同时触发点击事件，但Safari直到选项菜单关闭才会触发事件。 我需要在点击时立即触发点击事件，有什么解决方法吗？

我在Safari 9和10上进行了测试。 这是jsfiddle链接：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 = '';
    }
  }
})

注意：在我的实际代码中，我必须使用click.stop.prevent来停止冒泡和阻止默认行为，因此解决方案应满足这个条件。

Translated:

注意：在我的实际代码中，我必须使用click.stop.prevent来停止事件传递和阻止默认行为，因此解决方案应该符合这个条件。

- Hafez Divandari

Answer 1

尝试使用mousedown而不是click（Fiddle）。

---

注意： 据我所知，click会在释放鼠标按钮时触发事件，而mousedown会在按下鼠标按钮时触发事件。这可能是处理程序执行延迟的原因。

- FK82

---

由于某些原因，我必须在我的实际代码中使用 click.stop.prevent，而 mousedown.stop.prevent 则会防止选择器显示其选项菜单。但是您的答案对于这个问题来说是可以接受的。 - Hafez Divandari

虽然我不相信单击处理程序被延迟是真实的行为。 - Hafez Divandari

1. 考虑使用 mouseup
2. 考虑将选择包装在另一个元素中，并停止该元素的传播。

- Linus Borg

@HafezDivandari，除非您发布代码，否则我无法帮助您解决实际代码。您的实际代码中是否绑定了一些复杂的逻辑到click事件上？ - FK82

@LinusBorg mouseup 和 click 一样不起作用。我无法在我的 fiddle 上使您的第二个解决方案生效，如何在包装元素上阻止传播呢？ - Hafez Divandari

@FK82 是的，这是一个复杂的表格，我会尝试总结并发布它。谢谢。 - Hafez Divandari