div 屏蔽点击事件(如何为DIV添加点击事件)
Vue 3的新特性Teleport：你了解它吗？Vue框架鼓励我们通过封装UI和相关行为到组件中来构建用户界面，这些组件可以相互嵌套，构成一棵UI树。有时候组件模板的一部分在逻辑上属于该组件，但在DOM结构中却需要位于其他位置，比如在Vue应用程序实例之外。这时，Vue 3中的Teleport组件就派上了用场。
想象一下这样的场景：你正在创建一个包含全屏模态的组件。模态的逻辑通常存在于组件内部，但你会发现模态的定位很难通过CSS解决。这时，Vue 3的Teleport组件就可以帮助你解决这个问题。通过Teleport组件，你可以将某些HTML片段移动到DOM中的指定位置。
这是一个使用Teleport组件的示例。假设你有一个HTML结构，其中包含一个嵌套的modal-button组件。这个组件包含一个按钮和一个带有模态内容的div元素。当按钮被点击时，模态将打开并显示在屏幕上。由于模态在嵌套的div中渲染，样式属性如“position: absolute;”会相对于最近的父级div元素应用，这可能会导致问题。
为了解决这个问题，Vue 3引入了Teleport组件。Teleport允许你指定一个目标位置，将模板中的某些部分移动到那里去。这意味着你可以将模态的内容移出嵌套的div，并放置在你想要的任何位置。Teleport组件有两个重要的属性：
1. to：这是一个必需的字符串类型属性，它的值是一个有效的查询选择器或HTML元素名。Teleport组件的内容将被移动到指定的目标元素中。
2. disabled：这是一个可选的布尔类型属性，用于禁用Teleport组件的功能。当设置为true时，插槽内容将不会在指定的目标位置渲染，而是在周围父组件中指定
在Vue框架中，我们有时需要将某些组件的内容直接渲染到body标签下，而不是在组件自身的DOM结构中。这时，我们可以使用Vue的`
让我们定义这个组件的模板部分。在这个模板中，我们有一个按钮和一个被`
```vue
appponent('modal-button', {
template: `
I'm a teleported modal! (My parent is "body")
`,
data() {
return {
modalOpen: false
}
}
})
```
当你点击“Open...”按钮时，Vue会响应这个点击事件，并将模态框的内容渲染到body标签下。这样，你就可以在页面的任何地方看到这个模态框的出现和消失。这一功能使得我们在开发复杂的Vue应用时，能够更加灵活地控制组件的渲染位置。喜欢这种灵活的组件设计吗？欢迎关注、转发、评论、点赞和收藏我的文章。
```javascript
document.ontouchstart = function() {
return false; // 这样就可以屏蔽触摸事件了
};
```