如何从零开始解决Web Office套件中Click事件引起的z-index层级问题？

本文共计808个文字，预计阅读时间需要4分钟。

这是一个系列博客，旨在最终制作一个基于HTML Canvas、类似于微软Office的Web Office套件（包括文档、表格、幻灯片等）。

这是一个系列博客，最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件（包括：文档、表格、幻灯片……等等）。
自由互联：《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址：github.com/zhaokang555/canvas-text-editor

2. 富文本编辑器(MVP) 2.18 Click 事件的 z-index 2.18.1 新的问题：点击空白处

首先，我们先观察一下其他的幻灯片软件：

通过上图可以发现，当我们点击编辑器内空白处时，编辑器会执行以下逻辑：

1. 找到距离点击位置最近的行
2. 在此行内找到距离点击位置最近的字符
3. 在此字符的左侧或者右侧插入光标

为了实现这个feature，我们就要监听编辑器空白处的click事件。与此同时，我们会遇到和hover事件相同的问题: 我们需要找到最上层的元素（Char or 空白），触发它的点击事件。