浏览器的全局焦点事件

浏览器的独立的全局焦点管理事件

1. 点击任何元素都会自动触发焦点重计算

2. 系统会先移除当前焦点元素的焦点

3. 然后判断新点击元素是否可聚焦

4. 整个过程：

   • 独立于事件冒泡机制

   • 发生在事件传播之前

   • 是浏览器底层行为

因此，点击普通 div 导致 input 失焦：

• 不是事件冒泡造成

• 不是 div 有特殊逻辑

• 而是浏览器焦点管理系统的标准行为

在需要保持焦点的场景，我们可以：

• 阻止 mousedown 的默认行为

• 手动调用 focus() 方法保持焦点"

业务场景：

在表格里有表单，点击这一行表格会路由跳转，在表单里修改东西时，失焦保存或者输入文本时，可能会触发表格的点击事件，导致跳转，这肯定不行，那应该如何阻止表单的点击事件呢？

首先input的失焦事件是blur，这个事件是属于浏览器进行监管，这个失焦事件执行完了之后，才会去执行点击事件，所以我们可以给这个失焦事件写一个变量进行判断（默认值为true），一旦为false,点击事件就不执行

<script setup>
import { reactive,ref } from 'vue'
const product =reactive({price:0
})
const isRun=ref(true)
const savePrice =() =>{console.log("保存价格到服务器")isRun.value=false
}
const goToDetail =() =>{console.log(isRun.value)if(isRun.value){console.log("跳转")}else{isRun.value=truereturn}
}     
</script>
<template><table><tr @click="goToDetail" style="background-color: pink;"><td><input v-model="product.price" @blur="savePrice"@click.stop></td></tr>
</table>
</template>