Laravel Livewire中wire:focus与wire:click同时触发双操作问题求解

冲突原因 #

点击未聚焦状态的输入框时，浏览器会按顺序先触发focus事件、再触发click事件，之前绑定的两个事件分别执行「显示搜索建议」和「切换/隐藏搜索建议」逻辑，两个动作连续触发就会出现建议框刚显示就立刻消失的问题。
Tab键聚焦的场景只会触发focus事件，不会触发click，所以这部分逻辑一直是正常的。 #

最优实现方案（基于AlpineJS，无侵入改原有逻辑） #

不需要修改现有Livewire组件里的handleFocus、handleClick方法，只需要在输入框上加一层轻量的Alpine判断，过滤掉同一次点击触发的无效click事件即可：

<input 
    type="text" 
    wire:model="searchTerm"
    wire:focus="handleFocus"
    wire:click="handleClick"
    x-data="{ lastFocusTimestamp: 0 }"
    @focus="lastFocusTimestamp = Date.now()"
    @click="if (Date.now() - lastFocusTimestamp < 150) return $event.stopImmediatePropagation()"
>

逻辑说明 #

• 给输入框初始化一个Alpine变量，记录每次focus事件触发的时间戳
• 每次click事件触发时，先判断和上一次focus的时间差：
  • 如果时间差小于150ms，判定为「点击未聚焦输入框」场景下focus和click连续触发的情况，直接阻止当前click事件向后传播，不会触发Livewire绑定的handleClick方法，搜索建议正常显示
  • 如果时间差大于150ms，说明输入框早就处于聚焦状态，这次是用户聚焦后的主动点击，正常触发handleClick隐藏搜索建议
• Tab键聚焦时，触发focus后不会立刻跟随click事件，后续用户再点击输入框时时间差远大于150ms，逻辑完全符合预期

方案优势 #

• 无侵入：原有Livewire后端逻辑不需要做任何修改
• 无感知：150ms的阈值是浏览器事件连续触发的常规时间差，用户完全感知不到判断延迟，也不会出现误判
• 代码量极小：不需要额外维护聚焦状态、不需要加防抖/长定时器，不会出现定时器清理不及时导致的逻辑错乱
• 兼容所有交互场景：鼠标点击聚焦、Tab键聚焦、聚焦后重复点击的场景全部覆盖

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