bug 记录 - 失焦事件被按钮点击事件触发

发现问题与调试过程

• 页面中存在输入框，失去焦点后校验是否正确。
• 另外一模块的按钮（删除操作）点击后，本不应该触发这里的失焦，但是现在触发了。

代码复现

<!-- 失焦校验的输入框 -->
<input
   type="text"
   placeholder="请输入"
   @blur="getCardName()"
 />
<!-- 删除按钮 -->
<img
   :src="searchDelete"
   alt=""
   class="del"
   @click="delRow(item, index)"
 />

• 点击删除按钮的时候，getCardName 和 delRow 都会被触发
• 最初的想法是在 delRow 内部加一个开关，执行 delRow 的时候，将开关 flag 置为 true，在 getCardName 中，如果检测到 flag 为 true，就阻断运行
• 但是上述方法不可行，getCardName 会先于 delRow 执行。

鼠标点击事件的执行顺序

• mousedown 鼠标按下时发生 – blur 在此时被触发
• mousedup 鼠标放开后发生
• click 鼠标点击并放开后发生
• blur 早于 click 事件

修改代码

• 将点击事件绑定在 mousedown 上，并且阻止默认行为

<!-- 删除按钮 -->
<img
   :src="searchDelete"
   alt=""
   class="del"
   @mousedown="
     ($event) => {
       delRow(item, index, $event);
     }
   "
 />
 <script>
	function delRow(item, index, event) {
      event.preventDefault(); // 阻止默认事件，阻止失焦校验
      // 执行删除改做的操作
    }
 </script>