在线表格编辑器点击Tab触发事件

收藏

本帖最后由 Clark.Pan 于 2023-6-30 13:52 编辑

需求：

需要在点击Tab的时候插入一些代码，所以希望能有事件能够监听到Tab的点击

解决方法：

SpreadJS源生没有对点击Tab进行事件监听，只能通过自己监听js的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");
}
}
});

复制代码

首先我们通过解析dom发现tab都是一个a标签，所以在判断中，我们首先判断target的nodeName是不是a标签。之后我们发现tab的dom中会有一个role的属性，属性名称为tab。那么接下来我们继续判断role属性的值为tab。最终我们需要知道点击的是哪一个tab名称，这个可以通过target.innerHTML来获取dom中的内容。
实际效果如下所示：
根据点击的tab不同，console显示点击tab的名称

		自动登录	找回密码
密码			立即注册

在线表格编辑器点击Tab触发事件

0 个回复

浏览过的版块

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄