Android移动端浏览器如何实现mousemove事件及文本选中功能？

核心问题分析 #

桌面端依赖的mousemove事件在Android浏览器中不生效，直接替换为touchmove会触发默认文本选中行为，同时触摸坐标的处理逻辑与鼠标事件存在本质差异，导致原有功能异常。

解决方案 #

1. CSS层面禁用文本选中

从根源上阻止移动端的文本选中行为，兼容Android WebKit内核浏览器：

#game-section span {
  user-select: none;
  -webkit-user-select: none;
}

2. JS层面统一鼠标/触摸事件处理

同时适配鼠标和触摸交互逻辑，修正坐标获取方式，避免误触发：

// 绑定鼠标移动与触摸滑动事件
$("#game-section span").on('mousemove touchmove', function(ev) {
  const event = ev.originalEvent || ev;
  let clientX, clientY;

  // 区分事件类型，获取正确坐标
  if (event.type === 'touchmove') {
    ev.preventDefault(); // 阻止触摸默认行为，避免滚动和文本选中
    clientX = event.touches[0].clientX;
    clientY = event.touches[0].clientY;
  } else {
    clientX = ev.clientX;
    clientY = ev.clientY;
  }

  const $elem = $(this);
  const elemOffset = $elem.offset();
  const elemX = elemOffset.left;
  const elemY = elemOffset.top;
  const elemWidth = $elem.width();
  const elemHeight = $elem.height();

  // 判断触点是否在当前元素范围内，避免滑到其他元素时误触发
  if (clientX >= elemX && clientX <= elemX + elemWidth && clientY >= elemY && clientY <= elemY + elemHeight) {
    if (!$elem.hasClass('highlightE') && active) {
      // 初始化方向轴
      if (!axis) {
        axis = elemX === startX ? 'y' : 'x';
      }

      // 按轴方向添加高亮
      if (axis === 'y' && elemX === startX && elemY > startY) {
        $elem.addClass("highlightE");
      }
      if (axis === 'x' && elemY === startY && elemX > startX) {
        $elem.addClass("highlightE");
      }
    }
  }
});

// 绑定初始触发事件（鼠标按下/触摸开始）
$("#game-section span").on('mousedown touchstart', function(ev) {
  const event = ev.originalEvent || ev;
  const $elem = $(this);
  
  active = true;
  axis = null;
  // 记录初始元素的视口位置
  const elemOffset = $elem.offset();
  startX = elemOffset.left;
  startY = elemOffset.top;
  
  // 高亮初始选中元素
  $elem.addClass("highlightE");

  if (event.type === 'touchstart') {
    ev.preventDefault();
  }
});

// 绑定结束事件（鼠标松开/触摸结束）
$(document).on('mouseup touchend', function() {
  active = false;
  // 可在此添加重置高亮等后续逻辑
});

关键优化说明

• 坐标适配：用offset()获取元素相对视口的位置，替代原position()（相对父元素），确保与鼠标/触摸坐标的对比逻辑一致。
• 范围校验：触摸滑动时持续判断触点是否在目标元素内，避免跨元素误触发。
• 事件兼容：同时处理鼠标和触摸事件，保证桌面、移动端功能逻辑统一。

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