有什么办法能在表单页面监听到预览页数据加载后的变动和表单暂存功能的数据加载后的变动吗
有时候想要监听到他们的加载内容对页面内容进行处理,但是又没有方法,特别是暂存功能,又不会触发对应组件的监听事件,又没办法获取到对应的暂存数据
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
可以用原生JS在didmount事件中监听加载暂存数据的按钮实现。
大致思路:循环延时获取dom元素并且绑定点击事件,500毫秒执行1次,如果3秒钟后还没有获取到就证明这个页面用户之前没有暂存过数据不予理会。
代码示例:
// 用法示例
bindClickEventWithDelay(".next-btn.next-medium.next-btn-primary.next-dialog-btn", () => {
//这里可以写相关业务逻辑
alert("点击加载暂存数据了")
});
/** 参数说明:
selector:要查询的元素选择器。
callback:当元素被点击时调用的回调函数。
定时器设置:
setInterval每500 毫秒执行一次,以检查指定的DOM 元素是否存在。
查找DOM 元素:
使用document.querySelector(selector)获取目标元素。
判断逻辑:
如果 dialogBtn 元素存在,绑定点击事件并清除定时器。
如果达到最大尝试次数(即3 秒后),则停止进一步检查并清除定时器。
事件绑定:
一旦找到元素,就为该元素绑定点击事件,并在控制台输出确认信息。
*/
function bindClickEventWithDelay(selector, callback) {
const duration = 3000; // 最大等待时间 3 秒
const interval = 500; // 每 500 毫秒检查一次
let elapsed = 0; // 已经经过的时间
let maxAttempts = duration / interval; // 最大尝试次数
let attempts = 0; // 当前尝试次数
// 定时器检查 DOM 元素
const timer = setInterval(() => {
const dialogBtn = document.querySelector(selector);
attempts++;
if (dialogBtn) {
// 如果找到了元素,绑定点击事件
dialogBtn.addEventListener('click', callback);
console.log("绑定点击事件成功!");
clearInterval(timer); // 找到元素后清除定时器
}
// 如果达到最大尝试次数,停止检查
if (attempts >= maxAttempts) {
clearInterval(timer);
console.log("未找到元素,停止检查.");
}
}, interval);
}
最终效果: