如何用jQuery/JS实现点击任意位置自动获取坐标并拖拽ball元素

• 多数站点版本更新后，将原有基于纯鼠标事件的拖拽逻辑迁移到了Pointer事件体系，仅触发mousedown/mouseup的合成事件无法被拖拽监听器捕获
• 部分站点新增了isTrusted事件属性校验，jQuery构造的合成事件该属性值为false，会被直接过滤拦截
• 原逻辑的事件序列缺少对现代浏览器拖拽流程的适配，触发顺序和事件类型不匹配新站点的监听规则

实现逻辑对齐原脚本的运行节奏：点击屏幕任意位置时先捕获当前点击坐标，再自动完成#ball元素的拖拽流程，全程兼容新旧两类事件体系。
可直接运行的代码如下：

(function () {
  'use strict';
  // 存储全局点击的坐标
  let clickPosX = 0;
  let clickPosY = 0;
  let dragTimer = null;

  // 全局捕获点击位置
  document.addEventListener('click', (e) => {
    clickPosX = e.clientX;
    clickPosY = e.clientY;
    runBallDrag();
  });

  // 构造原生鼠标事件，替代jQuery合成事件规避拦截
  function buildMouseEvent(eventType, posX, posY) {
    return new MouseEvent(eventType, {
      bubbles: true,
      cancelable: true,
      view: window,
      button: 0,
      clientX: posX,
      clientY: posY
    });
  }

  // 构造Pointer事件，适配新版站点的拖拽监听
  function buildPointerEvent(eventType, posX, posY) {
    return new PointerEvent(eventType, {
      bubbles: true,
      cancelable: true,
      pointerId: 1,
      pointerType: 'mouse',
      isPrimary: true,
      button: 0,
      clientX: posX,
      clientY: posY
    });
  }

  function runBallDrag() {
    const ballElement = document.getElementById('ball');
    if (!ballElement) return;
    // 清理未执行完的旧定时器
    if (dragTimer) clearTimeout(dragTimer);

    function dragStep() {
      const ballRect = ballElement.getBoundingClientRect();
      // 依次触发旧版鼠标事件、新版Pointer事件，双体系兼容
      ballElement.dispatchEvent(buildPointerEvent('pointerdown', ballRect.x, ballRect.y));
      ballElement.dispatchEvent(buildMouseEvent('mousedown', ballRect.x, ballRect.y));
      // 在捕获的点击位置触发抬起动作
      document.body.dispatchEvent(buildPointerEvent('pointerup', clickPosX, clickPosY));
      document.body.dispatchEvent(buildMouseEvent('mouseup', clickPosX, clickPosY));
      // 保持原脚本的100ms循环节奏
      dragTimer = setTimeout(dragStep, 100);
    }

    dragStep();
    // 对齐原脚本20ms后停止循环的运行逻辑
    setTimeout(() => {
      clearTimeout(dragTimer);
      dragTimer = null;
    }, 20);
  }
})();

• 如果站点依然拦截事件，可以在事件构造参数中补充offsetX、offsetY、relatedTarget等真实鼠标事件携带的字段，匹配站点的校验规则
• 所有事件必须通过原生dispatchEvent方法触发，不要使用jQuery的.trigger()方法，其构造的事件在新版站点的校验通过率远低于原生事件
• 拖拽事件的绑定路径要和真实操作一致：按下事件必须在#ball元素本身触发，抬起事件需要绑定在全局document/body层级，不要错绑元素

内容的提问来源于stack exchange，提问作者Lazaro YT