Vue中blur阻止绑定函数执行问题及blur执行时长测量咨询

我来帮你拆解这个问题，并且给出可行的解决方案：

问题根源：事件触发顺序导致的冲突 #

你遇到的核心问题是事件触发的先后顺序：当你点击列表项时，浏览器会先触发输入框的blur事件（因为输入框失去了焦点），这个事件会立即执行_close()，把open设为false，Vue随之更新DOM，隐藏了列表。而click事件需要在mousedown+mouseup之后才会触发，这时候列表项已经被移除了，所以set_data()根本没有机会执行。

并不是blur主动阻止了其他函数，而是DOM元素被提前移除，导致后续的click事件找不到目标元素，自然无法触发。

可行解决方案 #

方案1：给blur事件添加微延迟（最简单） #

不需要纠结blur的执行时长，只需要把_close()的执行放到下一个事件循环，这样就能让click事件先执行完毕，再关闭列表。用setTimeout(0)就足够（0延迟会把任务放到事件队列末尾，等待当前所有同步事件执行完）：

methods: {
  set_data(letter) {
    this.letter = letter;
    this.open = false; // 可选：选中后主动关闭列表
  },
  _close(){
    setTimeout(() => {
      this.open = false;
    }, 0);
  },
  _show(){
    this.open = true;
  }
}

这样修改后，点击列表项时，click事件会先执行set_data()，然后再执行_close()关闭列表，完美解决冲突。

方案2：用mousedown替代click #

mousedown事件的触发时机早于blur，所以可以把列表项的click换成mousedown，确保数据先被设置：

<ul v-if="open">
  <li v-on:mousedown="set_data('A')">A</li>
  <li v-on:mousedown="set_data('B')">B</li>
  <li v-on:mousedown="set_data('C')">C</li>
</ul>

同时可以在set_data()里主动关闭列表，避免依赖blur：

set_data(letter) {
  this.letter = letter;
  this.open = false;
}

方案3：自定义指令处理点击外部（更优雅） #

如果要处理“点击外部区域关闭列表”的场景，推荐用自定义指令替代blur事件，这样可以精准控制哪些区域点击会关闭列表：

Vue.directive('click-outside', {
  bind(el, binding, vnode) {
    el.clickOutsideHandler = (e) => {
      // 点击的元素不是当前元素，也不是当前元素的子元素时，执行关闭逻辑
      if (!el.contains(e.target)) {
        vnode.context[binding.expression]();
      }
    };
    document.addEventListener('click', el.clickOutsideHandler);
  },
  unbind(el) {
    document.removeEventListener('click', el.clickOutsideHandler);
  }
});

然后修改模板，去掉blur事件，换成自定义指令：

<div id="app" v-click-outside="_close">
  <input v-on:keyup="_show"/>
  <ul v-if="open">
    <li v-on:click="set_data('A')">A</li>
    <li v-on:click="set_data('B')">B</li>
    <li v-on:click="set_data('C')">C</li>
  </ul>
  <div> {{letter}} </div>
</div>

这样点击列表项时，因为列表在#app内部，不会触发外部点击逻辑，set_data()会正常执行；点击页面其他区域时，才会触发_close()关闭列表。

关于你的额外问题 #

1. 为什么JavaScript中blur会阻止其他函数执行？ #

如前所述，不是blur阻止了函数执行，而是事件顺序+DOM更新导致的：blur先触发，同步更新DOM移除了列表项，后续的click事件找不到目标元素，所以无法触发对应的函数。

2. 如何测量blur的执行时长？ #

blur事件的执行是同步的，你可以用console.time()来测量_close()函数的执行时间：

_close(){
  console.time('blur-execution');
  this.open = false;
  // 其他逻辑
  console.timeEnd('blur-execution'); // 会在控制台输出执行时长
}

但这个时长其实和你的问题无关，因为冲突的核心是事件顺序，不是blur的执行速度。

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