登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

208 主题	1万帖子	1万积分

Rank: 8 Rank: 8

积分: 15814

85193
金币
208
主题
10024
帖子

最新发帖

在线表格编辑器监听Tab的点击事件

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

超级版主 / 发表于：2024-7-22 10:59 / 查看：175 / 回复：0

本帖最后由 Clark.Pan 于 2024-7-22 11:02 编辑

背景：

用户有需求需要监听在线表格编辑器上方 Tab 对应的点击事件，在事件中做处理。
image.png656273498.png

image.png656273498.png

解决方案：
SpreadJS 源生并没有提供上面 Tab 的点击事件，所以我们需要通过解析 dom 结构自行处理此处。如下图所示，当我们查看网页 dom 元素的时候，我们发现所有的Tab都会有一个 "role" 的属性，且值为"tab"。于是我们可以监听全局的click事件，以此进行判断：

document.body.addEventListener("click",function (event) {
var target = event.target || event.srcElement;
if (target.nodeName.toLocaleLowerCase() === "a") {
if(target.getAttribute("role") == "tab"){
//do something you want
console.log("点击的是：" + target.innerHTML + "tab");
}
}
});

复制代码

通过上述判断，我们就可以监听到tab的点击事件了。
image.png158554381.png

image.png158554381.png

收藏

回复

点击查看 -->【预览版体验】SpreadJS v16.0 预览版 - 新文件结构

0 个回复