news 2026/9/2 18:47:02

阿里验证码Web和H5客户端V3架构接入鼠标拖拽滑块离开对话框释放鼠标时一直处于验证中问题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
阿里验证码Web和H5客户端V3架构接入鼠标拖拽滑块离开对话框释放鼠标时一直处于验证中问题

Web和H5客户端V3架构接入:

现象:鼠标拖拽滑块离开对话框释放鼠标时一直处于验证中,没有触发验证。

分析:V3版本问题,V2无该问题。初步定位是因为V3滑块离开滑块弹框范围时释放鼠标,没有触发mouseup事件,导致插件没有回调验证函数;

解决思路:尝试拖拽在滑块框外面时,手动触发校验,分析getInstance方法返回实列没有对外提供方法触发校验;

思考:手动触发滑块按钮事件,看是不能触发插件的校验回调,通过JS获取滑块dom节点,研究mousedown,mosemove,mouseup, click事件,发现调用滑块的click事件可用触发插件校验回调函数(返回账号密码等信息),效果满足。

结合react工程代码整理如下:

// 获取验证码实例 const getInstance = useCallback( (instance: ICaptchaInstance) => { // 验证码弹窗Dom const sliderElement = document.getElementById('aliyunCaptcha-sliding-slider'); // 滑块按钮Dom const modalElement = document.getElementById('vnnox-care-captcha-modal'); // 先清理上一次注册的事件,避免重复绑定 if (dragCleanupRef.current) { dragCleanupRef.current(); dragCleanupRef.current = null; } if (sliderElement && modalElement) { const handleMouseDown = () => { isDraggingRef.current = true; }; const handleMouseMove = () => { // 仅用于标记拖拽过程,不在此处触发点击 if (!isDraggingRef.current) return; }; const handleMouseUp = (event: MouseEvent) => { if (!isDraggingRef.current) return; isDraggingRef.current = false; const rect = modalElement.getBoundingClientRect(); const { clientX, clientY } = event; const isInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom; // 当拖拽结束(mouseup)时,如果鼠标位置已滑出父元素区域,则触发一次点击 if (!isInside) { // 添加到setTimeout中调用click,解决因调用click验证码弹框消失问题 setTimeout(()=>{ sliderElement.click(); }); } }; sliderElement.addEventListener('mousedown', handleMouseDown); window.addEventListener('mousemove', handleMouseMove); window.addEventListener('mouseup', handleMouseUp); dragCleanupRef.current = () => { sliderElement.removeEventListener('mousedown', handleMouseDown); window.removeEventListener('mousemove', handleMouseMove); window.removeEventListener('mouseup', handleMouseUp); }; } . . . }, [getErrorMessage, handleErrorWithDebounce] );
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/2 22:08:51

PageGuard 组件工作原理分析

## 1. 组件概述PageGuard 是一个*路由权限守卫组件*&#xff0c;用于保护页面访问权限。它通过检查当前路由路径是否在用户有权限访问的菜单列表中&#xff0c;来决定是否允许用户访问该页面。## 2. 核心工作流程## 3. 权限判断逻辑### 3.1 权限判断核心代码useEffect(() > …

作者头像 李华
网站建设 2026/9/2 21:23:17

LobeChat是否支持SSE流式输出?详细协议分析

LobeChat 是否支持 SSE 流式输出&#xff1f;一场关于实时交互的技术深潜 在今天&#xff0c;用户早已不再满足于“输入问题、等待几秒、突然弹出整段回答”的机械式 AI 交互。他们期待的是更自然的对话节奏——就像对面坐着一个人&#xff0c;边思考边说出下一句话。这种体验…

作者头像 李华
网站建设 2026/9/2 21:23:11

从图表图像中智能提取数据的革命性解决方案

还在为论文中的精美图表无法获取原始数据而头疼吗&#xff1f;WebPlotDigitizer这款开源工具正在重新定义图表数据提取的边界&#xff0c;让每一位研究者都能轻松实现从图像到数字的完美转换&#xff01;&#x1f4ab; 【免费下载链接】WebPlotDigitizer Computer vision assis…

作者头像 李华
网站建设 2026/9/2 22:06:49

《最长有效括号问题的算法解析与优化:栈方法的理论与实践》

最长有效括号问题的算法解析与优化&#xff1a;栈方法的理论与实践摘要最长有效括号问题是字符串处理领域的经典算法问题&#xff0c;要求在仅包含(和)的字符串中&#xff0c;找出格式正确且连续的最长括号子串长度。本文以栈方法为核心&#xff0c;系统分析其算法原理、时间 /…

作者头像 李华
网站建设 2026/9/2 3:59:37

SwiftUI 中的动态 UI 效果

在 iOS 开发中,用户界面的动态效果往往能大大提升用户体验。今天我们将探讨如何在 SwiftUI 中实现一个动态变色的 Picker,根据优先级选择器的不同选项,动态改变背景颜色。这不仅让界面更加生动,也能直观地反映出优先级的重要性。 背景 在 SwiftUI 中,Picker 组件的样式化…

作者头像 李华
网站建设 2026/9/2 10:13:15

LobeChat插件系统详解:扩展你的AI能力边界

LobeChat插件系统详解&#xff1a;扩展你的AI能力边界 在今天的 AI 应用开发中&#xff0c;一个核心矛盾日益凸显&#xff1a;大语言模型的能力越来越强&#xff0c;但用户真正能“用起来”的功能却常常受限于前端界面的封闭性。你可能拥有 GPT-4 级别的推理能力&#xff0c;却…

作者头像 李华