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

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

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

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

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

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

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

javascript 复制代码
  // 获取验证码实例
  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]
  );
相关推荐
不想看见4041 天前
一次关于“鼠标是不是串口”的追问:从USB协议到CAN总线
c++·qt·计算机外设
驱动小百科1 天前
雷柏鼠标驱动下载教程:雷柏鼠标驱动怎么安装
计算机外设·雷柏鼠标驱动下载·雷柏鼠标驱动·雷柏鼠标驱动安装·雷柏鼠标驱动官网
playboy1342 天前
NAS不能访问共享文件夹数据恢复
大数据·计算机外设
卢锡荣2 天前
一线通桌面显示器优选芯|乐得瑞 LDR6021Q
计算机外设
每周报刊5 天前
竞速座舱级视界:爱攻 AGP497UCZD 超宽 QDOLED 显示器解析
数据结构·游戏·计算机外设
小幂同学6 天前
笔记本触控板能用鼠标连点器吗?快捷键与位置问题解析
计算机外设·鼠标连点器·连点器
集芯微电科技有限公司7 天前
700V/17A高频开关低导通阻GaN HEMT驱动器适用于快充,LLC,PFC功率校正
人工智能·嵌入式硬件·深度学习·神经网络·机器学习·生成对抗网络·计算机外设
科技每日热闻8 天前
爱攻AGON霸天Max QD-OLED曲面电竞显示器AGP497UCZD重磅上市
科技·计算机外设
CoreTK_EMC8 天前
显示器 EMC 整改:干扰溯源、多接口处理与量产工程实践
计算机外设·芯通康·显示器 emc 整改·lvds edp emc·显示器 re 辐射超标·hdmi 接口 esd·显示器花屏闪屏
云上工程笔记8 天前
4K 显示器只能跑 30Hz 怎么办:从刷新率、HDMI 接口到线材的排查方法
计算机外设