自定义range slider真机失效无法切换套餐列的调试方法

通用真机调试方法 #

• 优先用Chrome远程调试：安卓手机开启USB调试后连接电脑，Chrome地址栏输入chrome://inspect即可选中真机打开的页面，直接打断点、看控制台日志、监控变量状态，完全复现真机运行环境，比开发者工具的移动端模拟准确得多。
• 先在核心事件入口加日志：比如touchstart、touchmove、mousedown回调里打印事件对象和pressed状态，先确认事件有没有正常触发，再看坐标计算、状态更新逻辑有没有问题。
• 优先排查控制台报错：真机环境的JS API兼容性、DOM元素获取结果经常和模拟器有差异，报错会直接中断后续逻辑执行。

代码中直接导致真机异常的核心问题 #

1. 触摸事件绑定错误 #

这是最核心的bug：

• 给滑块把手绑定触摸开始事件时，事件名多了on前缀。addEventListener绑定事件不需要带on前缀，写ontouchstart会导致事件根本没有绑定成功，真机上触摸把手完全不会触发逻辑：

// 错误写法
handle.addEventListener("ontouchstart", function(e) { ... })
// 正确写法
handle.addEventListener("touchstart", function(e) {
  e.preventDefault();
  pressed = true;
  handleMove(e.touches[0]);
}, { passive: false })

• 滑块轨道只绑定了touchmove事件，没绑定touchstart，用户触摸轨道的时候必须等手指移动才会把pressed设为true，点击操作完全无响应，补上轨道的touchstart监听即可。

2. 触摸事件缺少passive配置 #

现代移动端浏览器（Chrome、Safari）默认将touchstart、touchmove事件的passive设为true，这种状态下回调里的e.preventDefault()不会生效，拖动滑块时会同时触发页面滚动，导致滑块操作卡顿、失效。所有触摸相关事件绑定都需要显式传入第三个参数{ passive: false }：

window.addEventListener("touchmove", handleTouchMove, { passive: false });
window.addEventListener("touchend", handleMouseUp);
// 其他touchstart、touchmove监听同理

3. 套餐切换断点坐标过期 #

你当前把套餐切换的分界坐标存在plansBreakPoints全局变量里，只在初始化和媒体查询变化时计算一次。移动端页面加载过程中（图片、自定义字体渲染）、滚动时（浏览器地址栏收起/展开）、横竖屏切换时，DOM元素的位置都会变化，存的固定坐标完全不准，自然没法正确触发套餐切换。
修复方式很简单：每次handleMove执行时，实时获取分界元素的位置计算断点，不要提前缓存：

const handleMove = e => {
  // 实时计算断点坐标，避免位置偏移
  const breakPointEls = document.querySelectorAll(".StepRangeSlider__trackHeadItem");
  const activeBreakPoints = [
    breakPointEls[1].getBoundingClientRect()[isHorizontal ? "left" : "top"],
    breakPointEls[2].getBoundingClientRect()[isHorizontal ? "left" : "top"]
  ];
  // 后续套餐判断逻辑替换原有的plansBreakPoints为activeBreakPoints即可
  // ... 其余原有逻辑
}

另外你用的media.addListener已经被标准废弃，换成media.addEventListener('change', checkRangeSliderVersion)兼容性更好。

4. 触摸点取数兼容 #

部分移动端浏览器的触摸点信息可能存在changedTouches而非touches里，取坐标的时候加层兼容更稳妥：

const touchPoint = e.touches?.[0] || e.changedTouches?.[0];
if (!touchPoint) return;
const client = isHorizontal ? touchPoint.clientX : touchPoint.clientY;

修复后验证点 #

• 点击滑块把手、点击滑块轨道任意位置都能立刻更新数值
• 拖动滑块时页面不会跟随滚动，滑块位置跟随手指实时更新
• 滑动到对应阈值位置时，套餐列正常切换
• 滚动页面、切换横竖屏后，滑块功能不受影响

附原实现核心代码参考：

window.onload = () => {
  const init = function() {
    const breakpoints = [{
        value: 0,
        step: 12.5,
        stepsSoFar: 0
      },
      {
        value: 200,
        step: 50,
        stepsSoFar: 16
      },
      {
        value: 1000,
        step: 50,
        stepsSoFar: 32
      },
      {
        value: 2000,
        step: 500,
        stepsSoFar: 52
      },
      {
        value: 10000,
        step: 1000,
        stepsSoFar: 68
      },
      {
        value: 30000,
        step: 5000,
        stepsSoFar: 88
      },
      {
        value: 100000,
        step: 10000,
        stepsSoFar: 102
      },
      {
        value: 300000,
        step: 50000,
        stepsSoFar: 122
      },
      {
        value: 1000000,
        stepsSoFar: 136,
        step: 1
      }
    ];
    const pricing = [
      [200, 4, 0.2],
      [500, 10, 0.01],
      [1000, 15, 0.01],
      [2000, 20, 0.005],
      [7000, 50, 0.005],
      [10000, 65, 0.0025],
      [16000, 80, 0.0022],
      [25000, 100, 0.006],
      [30000, 130, 0.002],
      [65000, 200, 0.002],
      [100000, 270, 0.0015],
      [200000, 420, 0.0015],
      [300000, 570, 0.0006],
      [600000, 750, 0.0006],
      [700000, 810, 0.0006],
      [800000, 870, 0.0006],
      [900000, 930, 0.0006],
      [1000000, 990, 0.001]
    ];
    const planBgs = document.querySelectorAll(".StepRangeSlider__trackHeadItem");
    const media = window.matchMedia("(max-width: 1024px)");
    const minValue = 200;
    const maxStep = breakpoints[breakpoints.length - 1].stepsSoFar;
    const slider = document.getElementById("stepRangeSliderWrap");
    const handle = document.getElementById("rangeSliderHandle");
    const tooltip = document.getElementById("rangeSliderTooltip");
    const plans = document.querySelectorAll(".plan-content .right .content");
    let plansBreakPoints;
    let valueBlock;
    let emailsBlock;
    let isHorizontal;
    let value = 200;
    let step = 18;
    let pressed = false;


    const checkRangeSliderVersion = () => {
      if (media.matches) {
        valueBlock = document.querySelectorAll(".display-price-mob");
        emailsBlock = document.querySelectorAll(".emails-count");
        isHorizontal = false;
      } else {
        valueBlock = document.querySelectorAll(".display-price");
        emailsBlock = document.querySelectorAll(".emails-count");
        isHorizontal = true;
      }

      plansBreakPoints = [
        planBgs[1].getBoundingClientRect()[isHorizontal ? "left" : "top"],
        planBgs[2].getBoundingClientRect()[isHorizontal ? "left" : "top"]
      ];
    };

    checkRangeSliderVersion();
    media.addListener(checkRangeSliderVersion);

    const getPriceForEmailsCount = emails => {
      for (let i = pricing.length - 1; i >= 0; i--) {
        if (emails === pricing[i][0]) {
          return pricing[i][1];
        }
        if (emails > pricing[i][0]) {
          return (emails - pricing[i][0]) * pricing[i + 1][2] + pricing[i][1];
        }
      }
      return null;
    };

    const getValueForStep = step => {
      const nearest = breakpoints.reduce((prev, curr) =>
        curr.stepsSoFar < step && curr.stepsSoFar > prev.stepsSoFar ?
        curr :
        prev
      );
      const additionalValue = (step - nearest.stepsSoFar) * nearest.step;
      return nearest.value + additionalValue;
    };

    const handleChange = () => {
      const offset = (step / maxStep) * 100;
      handle.style[isHorizontal ? "left" : "top"] = offset + "%";
      tooltip.textContent = Math.floor(value);
      valueBlock.forEach(e => {
        e.textContent = getPriceForEmailsCount(value) + "$";
      });
      emailsBlock.forEach(e => {
        e.textContent = Math.floor(value);
      });
    };

    const handleMove = e => {
      const client = isHorizontal ? e.clientX : e.clientY;
      const sliderRect = slider.getBoundingClientRect();

      let startPosition = isHorizontal ? sliderRect.left : sliderRect.top;
      let endPosition = isHorizontal ? sliderRect.right : sliderRect.bottom;

      if (client <= plansBreakPoints[0]) {
        plans.forEach(e => {
          e.style.display = "none";
        });

        plans[0].style.display = "block";
      } else if (
        client >= plansBreakPoints[0] &&
        client <= plansBreakPoints[1]
      ) {
        plans.forEach(e => {
          e.style.display = "none";
        });

        plans[1].style.display = "block";
      } else if (client >= plansBreakPoints[1]) {
        plans.forEach(e => {
          e.style.display = "none";
        });

        plans[2].style.display = "block";
      }
      if (!client) return;

      let position;
      if (client < startPosition) {
        position = 0;
      } else if (client > endPosition) {
        position = endPosition - startPosition;
      } else {
        position = client - startPosition;
      }
      const currentStep = Math.round(
        (position / (isHorizontal ? sliderRect.width : sliderRect.height)) *
        maxStep
      );
      const currentStepValue = getValueForStep(currentStep);

      if (
        currentStepValue >= minValue &&
        (currentStepValue !== value || currentStep !== step)
      ) {
        value = currentStepValue;
        step = currentStep;
        handleChange();
      }
    };

    const handleTouchMove = e => {
      if (pressed) {
        handleMouseMove(e.touches[0]);
      }
    };

    const handleMouseUp = e => {
      if (pressed) {
        pressed = false;
      }
    };

    const handleMouseMove = e => {
      if (pressed) {
        handleMove(e);
      }
    };

    window.addEventListener("touchmove", handleTouchMove);
    window.addEventListener("touchend", handleMouseUp);
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("mouseup", handleMouseUp);

    slider.addEventListener("mousedown", function(e) {
      e.preventDefault();
      pressed = true;
      handleMove(e);
    });
    slider.addEventListener("touchmove", e => {
      e.preventDefault();
      pressed = true;
      handleMove(e.touches[0]);
    });
    handle.addEventListener("mousedown", function(e) {
      e.preventDefault();
      pressed = true;
      handleMove(e);
    });
    handle.addEventListener("ontouchstart", function(e) {
      e.preventDefault();
      pressed = true;
      handleMove(e.touches[0]);
    });
  };

  init();
};

内容的提问来源于stack exchange，提问作者Eugene Skomorokhov