news 2026/9/24 10:05:22

阿里验证码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/24 8:24:25

react实现虚拟键盘支持Ant design Input和普通input Dom元素-升级篇

本文基于上一篇文章进行优化&#xff0c;不需要关注业务input怎么封装&#xff0c;不涉及业务改动。通用自定义数组键盘输入功能如下&#xff1a;直接贴代码 import type { FC } from react; import React, { useEffect } from react; import { useRecoilValue } from recoil;…

作者头像 李华
网站建设 2026/9/24 9:09:56

LobeChat多设备同步状态提示

LobeChat多设备同步状态提示 在今天这个人人手握多台智能设备的时代&#xff0c;你有没有遇到过这样的场景&#xff1a;在通勤路上用手机和AI助手聊到一半&#xff0c;回到家想换电脑继续&#xff0c;却发现会话记录没同步&#xff1f;或者刚在平板上设置好的角色预设&#xff…

作者头像 李华
网站建设 2026/9/24 8:49:10

终极虚拟控制器驱动指南:ViGEmBus完整使用教程

终极虚拟控制器驱动指南&#xff1a;ViGEmBus完整使用教程 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus ViGEmBus是一款Windows内核模式驱动程序&#xff…

作者头像 李华
网站建设 2026/9/24 11:26:57

延长Amazon Connect呼叫接受时间的策略与实例

引言 在现代企业的客服中心中,Amazon Connect作为一个强大的云联系中心服务,提供了许多灵活的配置选项。然而,某些配置限制可能会对客服人员的日常工作产生影响。例如,默认情况下,Amazon Connect为客服人员提供了20秒的时间来接受或拒绝一个呼叫。在某些情况下,这个时间…

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

生态系统集成-现代Web开发的最佳实践

GitHub 主页 在我 40 年的编程生涯中&#xff0c;我见证了技术生态系统的演进。从早期的单打独斗到现代的协作开发&#xff0c;从封闭系统到开放生态&#xff0c;这种变化不仅改变了开发方式&#xff0c;更重新定义了软件构建的理念。 最近的一次大型企业项目让我深刻体会到&a…

作者头像 李华
网站建设 2026/9/25 6:04:31

LobeChat天气关联推荐文案

LobeChat 与天气关联推荐&#xff1a;构建可扩展的智能助手 在今天这个“AI 到处都是”的时代&#xff0c;用户早已不满足于一个只会回答问题的聊天机器人。他们希望 AI 能真正理解上下文、感知环境变化&#xff0c;甚至主动给出建议——比如你刚说要出差&#xff0c;它就能告诉…

作者头像 李华