如何使用jQuery监听用户滑动事件？跨区块滑动交互的最优监听器选择

嘿，刚好对滑动监听这块挺熟的，来给你详细解答下这两个问题：

其实jQuery核心库本身并没有专门封装“滑动”事件，但我们可以通过两种实用方式实现：

• 利用原生触摸事件（无额外依赖）：最基础的是监听touchstart、touchmove、touchend这三个原生触摸事件，通过记录触摸的起始和结束坐标，判断用户的滑动方向和距离。这种方式不需要引入额外插件，灵活性拉满。
• 使用jQuery Mobile的封装事件：如果你的项目已经引入了jQuery Mobile，它提供了封装好的swipe、swipeleft、swiperight事件，直接绑定就能用，省去了自己计算坐标的麻烦，省心又靠谱。

针对你说的“用户在section 2左右滑动时触发函数操作section 1”的需求，我推荐两种最有效的实现方式：

方案1：用jQuery Mobile的滑动事件（最省心） #

如果项目里已经有jQuery Mobile依赖，直接用swipeleft和swiperight事件就好，代码简洁直观：

// 监听section2的左滑事件
$('#section2').on('swipeleft', function() {
  // 这里写操作section1的逻辑，比如修改内容、添加类名等
  $('#section1').addClass('slide-left-effect');
  // 或者调用自定义函数
  handleSection1SlideLeft();
});

// 监听section2的右滑事件
$('#section2').on('swiperight', function() {
  $('#section1').removeClass('slide-left-effect');
  handleSection1SlideRight();
});

// 自定义操作section1的函数
function handleSection1SlideLeft() {
  // 具体操作逻辑，比如切换内容、添加动画
  $('#section1').html('<p>左滑触发的内容</p>');
}

function handleSection1SlideRight() {
  $('#section1').html('<p>右滑触发的内容</p>');
}

方案2：手动监听原生触摸事件（无额外依赖） #

如果不想引入jQuery Mobile，手动监听触摸事件来判断滑动方向也是非常高效的，核心是记录触摸起始位置，在触摸结束时计算位移：

let startX = 0;
const swipeThreshold = 50; // 滑动距离阈值，避免误触

// 记录触摸起始坐标
$('#section2').on('touchstart', function(e) {
  startX = e.originalEvent.touches[0].clientX;
});

// 触摸结束时判断滑动方向
$('#section2').on('touchend', function(e) {
  const endX = e.originalEvent.changedTouches[0].clientX;

  // 判断左滑：结束位置比起始位置小超过阈值
  if (startX - endX > swipeThreshold) {
    handleSection1SlideLeft();
  }
  // 判断右滑：结束位置比起始位置大超过阈值
  else if (endX - startX > swipeThreshold) {
    handleSection1SlideRight();
  }
});

// 自定义操作section1的函数
function handleSection1SlideLeft() {
  $('#section1').animate({marginLeft: '-30px'}, 300);
}

function handleSection1SlideRight() {
  $('#section1').animate({marginLeft: '0'}, 300);
}

小提示 #

• 一定要设置swipeThreshold（滑动阈值），避免用户的微小触摸被误判为滑动，提升交互体验。
• 如果需要支持桌面端的鼠标滑动，可以额外监听mousedown、mousemove、mouseup事件，逻辑和触摸事件完全类似。

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