Vue场景下如何让click事件先于focusout事件执行？

问题场景 #

在输入框输入内容时会弹出一个下拉div，需求是点击该div触发click事件，点击输入框外部时隐藏这个div。但实际测试发现，点击div时，输入框的@focusout事件会先执行，导致div被隐藏，click事件无法触发。不想给页面所有非输入框元素绑定blur相关事件，求解决方案。

原问题代码示例 #

JS代码

new Vue({
  el: '#app',
  methods: {
    clickEvent() {
      console.log('click');
    },
    blurEvent() {
      console.log('focusout');
      this.myText="";
    },
  },
  data() {
    return {
      myText: ''
    };
  },
})

HTML代码

<div id="app">
    <div class="hello">
      <input  v-model="myText" @focusout="blurEvent" placeholder="write something">
      <div style="cursor:pointer;border:1px solid red; position:fixed; right:50%; top:0px;" v-if="myText" @click="clickEvent">Select an option</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js"></script>

解决思路 #

方法一：延迟执行blur逻辑

利用浏览器事件循环机制，让focusout的隐藏逻辑延迟执行，确保click事件先触发完成。

修改后的JS代码：

new Vue({
  el: '#app',
  methods: {
    clickEvent() {
      console.log('click');
      // 若需要点击后隐藏下拉，可在此处清空myText，替代延迟逻辑里的操作
      // this.myText = "";
    },
    blurEvent() {
      console.log('focusout');
      // 100ms延迟足够让click事件先执行，用户基本无感知
      setTimeout(() => {
        this.myText = "";
      }, 100);
    },
  },
  data() {
    return {
      myText: ''
    };
  },
})

HTML代码无需修改。如果点击下拉后不需要隐藏，可在clickEvent里添加标志位取消延迟的清空操作。

方法二：通过mousedown事件判断点击目标

mousedown事件优先级高于focusout，我们可以监听全局mousedown事件，判断点击的元素是否是输入框或下拉div，再决定是否执行隐藏逻辑。

修改后的JS代码：

new Vue({
  el: '#app',
  methods: {
    clickEvent() {
      console.log('click');
      this.myText = ""; // 点击下拉后隐藏
    },
    blurEvent() {
      console.log('focusout');
      if (this.allowHide) {
        this.myText = "";
      }
    },
    handleMouseDown(e) {
      // 定位输入框和下拉div元素
      const inputEl = document.querySelector('.hello input');
      const dropdownEl = document.querySelector('.hello div');
      // 判断点击目标是否为输入框或下拉div
      this.allowHide = !([inputEl, dropdownEl].includes(e.target));
    }
  },
  data() {
    return {
      myText: '',
      allowHide: true
    };
  },
  mounted() {
    // 绑定全局mousedown事件
    document.addEventListener('mousedown', this.handleMouseDown);
  },
  beforeDestroy() {
    // 组件销毁时移除事件监听，避免内存泄漏
    document.removeEventListener('mousedown', this.handleMouseDown);
  }
})

HTML代码无需修改。这种方法更精准，没有延迟，同时能准确控制是否隐藏下拉框。

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