深入探索HTML DOM元素响应触摸事件的技术原理与实战技巧助力开发者打造卓越移动端用户交互体验

引言

随着智能手机和平板电脑的普及，移动设备已成为人们日常生活中不可或缺的一部分。对于Web开发者而言，创建能够提供流畅、直观触摸交互体验的应用程序变得至关重要。HTML DOM元素的触摸事件处理技术，正是实现这一目标的核心。本文将深入探索触摸事件的技术原理，分享实用的实战技巧，帮助开发者打造卓越的移动端用户交互体验。

触摸事件的基本概念和原理

触摸事件与鼠标事件的区别

在桌面浏览器中，我们主要依赖鼠标事件（如click、mousedown、mouseup等）来处理用户交互。然而，移动设备上的触摸交互与鼠标交互有着本质的区别：

多点触控：触摸设备支持同时多个触摸点，而鼠标只有一个单一的指针。
触摸面积：手指触摸屏幕时会有一定的接触面积，而非鼠标的精确点。
交互方式：触摸交互包括轻触、滑动、捏合、旋转等多种手势，而鼠标交互主要是点击和移动。

触摸事件的工作原理

当用户触摸屏幕时，触摸事件会按照以下流程传播：

触摸检测：设备硬件检测到触摸行为。
事件生成：操作系统将原始触摸数据转换为标准化的触摸事件。
事件传递：浏览器接收这些事件并创建相应的DOM事件。
事件处理：JavaScript代码可以监听并处理这些事件。

触摸事件的类型和属性

基本触摸事件类型

HTML5定义了四种基本的触摸事件类型：

touchstart：当手指触摸屏幕时触发。
touchmove：当手指在屏幕上移动时触发。
touchend：当手指离开屏幕时触发。
touchcancel：当触摸被系统中断时触发（如来电、弹出对话框等）。

TouchEvent和Touch接口

触摸事件通过TouchEvent接口表示，它包含以下重要属性：

touches：当前屏幕上所有触摸点的列表。
targetTouches：当前目标元素上所有触摸点的列表。
changedTouches：状态发生变化的触摸点的列表。

每个触摸点由Touch接口表示，包含以下属性：

identifier：触摸点的唯一标识符。
target：触摸开始的DOM元素。
clientX和clientY：触摸点在视口中的坐标。
pageX和pageY：触摸点在页面中的坐标。
screenX和screenY：触摸点在屏幕中的坐标。
radiusX和radiusY：触摸点的椭圆形状的半径。

代码示例：基本触摸事件处理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>触摸事件示例</title> <style> #touchArea { width: 300px; height: 300px; background-color: #f0f0f0; border: 1px solid #ccc; margin: 20px auto; text-align: center; line-height: 300px; user-select: none; } #output { margin: 20px; padding: 10px; border: 1px solid #ddd; min-height: 100px; } </style> </head> <body> <div id="touchArea">触摸此区域</div> <div id="output"></div> <script> const touchArea = document.getElementById('touchArea'); const output = document.getElementById('output'); // 记录触摸开始的位置和时间 let touchStartX = 0; let touchStartY = 0; let touchStartTime = 0; // touchstart事件处理 touchArea.addEventListener('touchstart', function(e) { e.preventDefault(); // 阻止默认行为，防止页面滚动 // 获取第一个触摸点 const touch = e.touches[0]; touchStartX = touch.clientX; touchStartY = touch.clientY; touchStartTime = Date.now(); output.innerHTML += `触摸开始: (${touchStartX}, ${touchStartY})<br>`; output.innerHTML += `活动触摸点数量: ${e.touches.length}<br>`; }); // touchmove事件处理 touchArea.addEventListener('touchmove', function(e) { e.preventDefault(); // 阻止默认行为，防止页面滚动 const touch = e.touches[0]; const deltaX = touch.clientX - touchStartX; const deltaY = touch.clientY - touchStartY; output.innerHTML += `移动中: (${touch.clientX}, ${touch.clientY})<br>`; output.innerHTML += `偏移量: (${deltaX}, ${deltaY})<br>`; }); // touchend事件处理 touchArea.addEventListener('touchend', function(e) { e.preventDefault(); const touchEndTime = Date.now(); const touchDuration = touchEndTime - touchStartTime; output.innerHTML += `触摸结束，持续时间: ${touchDuration}ms<br>`; output.innerHTML += `------------------------<br>`; }); // touchcancel事件处理 touchArea.addEventListener('touchcancel', function(e) { output.innerHTML += `触摸被取消<br>`; output.innerHTML += `------------------------<br>`; }); </script> </body> </html>

触摸事件的处理机制

事件传播与冒泡

触摸事件与鼠标事件一样，遵循DOM事件传播机制，包括三个阶段：

捕获阶段：事件从window对象向下传播到目标元素。
目标阶段：事件在目标元素上触发。
冒泡阶段：事件从目标元素向上传播回window对象。

开发者可以使用addEventListener的第三个参数来控制事件监听是在捕获阶段还是冒泡阶段执行。

阻止默认行为

在触摸事件处理中，经常需要调用preventDefault()方法来阻止浏览器的默认行为，例如：

阻止页面滚动
阻止缩放
阻止长按菜单

element.addEventListener('touchmove', function(e) { e.preventDefault(); // 阻止触摸移动时的默认行为 }, { passive: false }); // 注意：需要设置passive为false才能调用preventDefault

passive事件监听器

为了提高滚动性能，现代浏览器引入了passive事件监听器。默认情况下，touchstart和touchmove事件是passive的，这意味着在这些事件中调用preventDefault()将无效，并会在控制台产生警告。

如果需要在事件处理中阻止默认行为，必须明确设置passive: false：

element.addEventListener('touchmove', function(e) { // 可以在这里调用e.preventDefault() }, { passive: false });

实战技巧：如何优化触摸事件处理

1. 防抖与节流

在处理touchmove等频繁触发的事件时，使用防抖（debounce）和节流（throttle）技术可以显著提高性能。

// 节流函数：限制函数在一定时间内只能执行一次 function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall < delay) { return; } lastCall = now; return func.apply(this, args); }; } // 防抖函数：延迟执行函数，如果在延迟时间内再次调用则重新计时 function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用节流处理touchmove事件 element.addEventListener('touchmove', throttle(function(e) { // 处理触摸移动 console.log('Throttled touchmove:', e.touches[0].clientX, e.touches[0].clientY); }, 100)); // 每100ms最多执行一次 // 使用防抖处理touchend事件 element.addEventListener('touchend', debounce(function(e) { // 处理触摸结束 console.log('Debounced touchend'); }, 300)); // 触摸结束后300ms内没有新的触摸事件才执行

2. 手势识别

通过分析触摸事件的序列，可以识别各种手势，如滑动、捏合、旋转等。

滑动手势识别

let startX = 0; let startY = 0; let startTime = 0; element.addEventListener('touchstart', function(e) { const touch = e.touches[0]; startX = touch.clientX; startY = touch.clientY; startTime = Date.now(); }); element.addEventListener('touchend', function(e) { const touch = e.changedTouches[0]; const endX = touch.clientX; const endY = touch.clientY; const endTime = Date.now(); // 计算距离和时间 const deltaX = endX - startX; const deltaY = endY - startY; const deltaTime = endTime - startTime; // 计算速度 const speedX = Math.abs(deltaX) / deltaTime; const speedY = Math.abs(deltaY) / deltaTime; // 判断滑动方向 if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50 && speedX > 0.3) { if (deltaX > 0) { console.log('向右滑动'); // 触发向右滑动的处理逻辑 } else { console.log('向左滑动'); // 触发向左滑动的处理逻辑 } } else if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50 && speedY > 0.3) { if (deltaY > 0) { console.log('向下滑动'); // 触发向下滑动的处理逻辑 } else { console.log('向上滑动'); // 触发向上滑动的处理逻辑 } } });

捏合缩放手势识别

let initialDistance = 0; element.addEventListener('touchstart', function(e) { if (e.touches.length === 2) { // 计算两个触摸点之间的初始距离 const touch1 = e.touches[0]; const touch2 = e.touches[1]; initialDistance = Math.hypot( touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY ); } }); element.addEventListener('touchmove', function(e) { if (e.touches.length === 2) { e.preventDefault(); // 阻止默认行为，防止页面缩放 // 计算当前两个触摸点之间的距离 const touch1 = e.touches[0]; const touch2 = e.touches[1]; const currentDistance = Math.hypot( touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY ); // 计算缩放比例 const scale = currentDistance / initialDistance; console.log('缩放比例:', scale); // 根据缩放比例执行相应的操作 if (scale > 1.1) { console.log('放大手势'); // 执行放大逻辑 } else if (scale < 0.9) { console.log('缩小手势'); // 执行缩小逻辑 } } });

3. 触摸反馈

为触摸操作提供视觉反馈可以显著提升用户体验。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>触摸反馈示例</title> <style> .button { width: 200px; height: 50px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px; margin: 20px; transition: all 0.2s; user-select: none; } .button:active { background-color: #45a049; transform: scale(0.98); } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); transform: scale(0); animation: ripple-animation 0.6s ease-out; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } </style> </head> <body> <button class="button" id="touchButton">触摸我</button> <script> const button = document.getElementById('touchButton'); // 添加涟漪效果 button.addEventListener('touchstart', function(e) { const touch = e.touches[0]; const rect = button.getBoundingClientRect(); // 创建涟漪元素 const ripple = document.createElement('span'); ripple.classList.add('ripple'); // 设置涟漪位置和大小 const size = Math.max(rect.width, rect.height); const x = touch.clientX - rect.left - size / 2; const y = touch.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; // 添加到按钮中 button.appendChild(ripple); // 动画结束后移除涟漪元素 setTimeout(() => { ripple.remove(); }, 600); }); // 添加触摸反馈 button.addEventListener('touchstart', function() { this.style.backgroundColor = '#45a049'; this.style.transform = 'scale(0.98)'; }); button.addEventListener('touchend', function() { this.style.backgroundColor = '#4CAF50'; this.style.transform = 'scale(1)'; }); </script> </body> </html>

4. 虚拟列表优化

对于包含大量数据的列表，使用虚拟列表技术可以显著提高触摸滚动的性能。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>虚拟列表示例</title> <style> #container { width: 100%; height: 400px; overflow-y: auto; border: 1px solid #ccc; position: relative; } #content { position: absolute; width: 100%; } .item { height: 50px; line-height: 50px; padding: 0 10px; border-bottom: 1px solid #eee; box-sizing: border-box; } </style> </head> <body> <div id="container"> <div id="content"></div> </div> <script> // 模拟大量数据 const totalItems = 10000; const itemHeight = 50; const visibleItems = Math.ceil(400 / itemHeight) + 2; // 可见项目数 + 缓冲 const container = document.getElementById('container'); const content = document.getElementById('content'); // 设置内容高度 content.style.height = totalItems * itemHeight + 'px'; // 当前显示的起始索引 let startIndex = 0; // 渲染项目 function renderItems() { // 清空内容 content.innerHTML = ''; // 计算当前可见的项目 const scrollTop = container.scrollTop; startIndex = Math.floor(scrollTop / itemHeight); // 渲染可见项目 for (let i = startIndex; i < Math.min(startIndex + visibleItems, totalItems); i++) { const item = document.createElement('div'); item.className = 'item'; item.textContent = `项目 ${i + 1}`; item.style.position = 'absolute'; item.style.top = i * itemHeight + 'px'; item.style.width = '100%'; content.appendChild(item); } } // 初始渲染 renderItems(); // 滚动时重新渲染 container.addEventListener('scroll', throttle(renderItems, 16)); // 约60fps // 节流函数 function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall < delay) { return; } lastCall = now; return func.apply(this, args); }; } </script> </body> </html>

常见问题与解决方案

1. 300ms点击延迟

在移动设备上，浏览器会等待约300ms来确定用户是否要进行双击缩放操作，这导致点击事件有明显的延迟。

解决方案：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>解决300ms点击延迟</title> <style> .button { width: 200px; height: 50px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 16px; margin: 20px; } </style> </head> <body> <button class="button" id="fastClickButton">快速点击按钮</button> <div id="output"></div> <script> const button = document.getElementById('fastClickButton'); const output = document.getElementById('output'); // 方法1: 使用touchend事件替代click事件 button.addEventListener('touchend', function(e) { e.preventDefault(); // 阻止默认行为，防止触发click事件 output.innerHTML += 'Touchend 事件触发<br>'; }); // 方法2: 使用FastClick库 // 首先引入FastClick库 // <script src="https://cdn.jsdelivr.net/npm/fastclick@1.0.6/lib/fastclick.min.js"></script> // 然后初始化FastClick // if ('addEventListener' in document) { // document.addEventListener('DOMContentLoaded', function() { // FastClick.attach(document.body); // }, false); // } // 方法3: 使用CSS touch-action属性 // .button { // touch-action: manipulation; /* 告诉浏览器该元素不需要双击缩放 */ // } // 方法4: 使用viewport meta标签 // <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> // 方法5: 使用Pointer Events API button.addEventListener('pointerup', function(e) { output.innerHTML += 'Pointerup 事件触发<br>'; }); </script> </body> </html>

2. 触摸事件与鼠标事件的兼容

在某些设备或浏览器中，触摸事件可能会触发相应的鼠标事件，导致重复处理。

解决方案：

let isTouch = false; // 监听触摸事件 element.addEventListener('touchstart', function(e) { isTouch = true; // 处理触摸事件 console.log('Touch start'); }, { passive: true }); // 监听鼠标事件 element.addEventListener('mousedown', function(e) { // 如果是触摸操作触发的，则忽略鼠标事件 if (isTouch) { isTouch = false; return; } // 处理鼠标事件 console.log('Mouse down'); }); // 重置触摸标志 element.addEventListener('touchend', function() { setTimeout(function() { isTouch = false; }, 500); });

3. 防止页面滚动

在处理某些触摸交互时，可能需要阻止页面滚动。

解决方案：

// 方法1: 在touchmove事件中调用preventDefault document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); // 方法2: 使用CSS overscroll-behavior body { overscroll-behavior: none; /* 阻止滚动链 */ } // 方法3: 使用touch-action CSS属性 .no-scroll { touch-action: none; /* 完全禁用触摸操作 */ } .pan-x { touch-action: pan-x; /* 只允许水平方向的平移 */ } .pan-y { touch-action: pan-y; /* 只允许垂直方向的平移 */ }

4. 处理多点触控

多点触控可以带来更丰富的交互体验，但也增加了处理的复杂性。

解决方案：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多点触控处理</title> <style> #canvas { width: 100%; height: 400px; background-color: #f0f0f0; border: 1px solid #ccc; touch-action: none; } .info { margin: 10px; padding: 10px; background-color: #eee; border-radius: 5px; } </style> </head> <body> <div id="canvas"></div> <div class="info" id="touchInfo">触摸信息将显示在这里</div> <script> const canvas = document.getElementById('canvas'); const touchInfo = document.getElementById('touchInfo'); // 存储触摸点信息 const touches = {}; // touchstart事件处理 canvas.addEventListener('touchstart', function(e) { e.preventDefault(); // 遍历所有新的触摸点 for (let i = 0; i < e.changedTouches.length; i++) { const touch = e.changedTouches[i]; // 存储触摸点信息 touches[touch.identifier] = { x: touch.clientX, y: touch.clientY, element: createTouchElement(touch.clientX, touch.clientY) }; // 显示触摸点 canvas.appendChild(touches[touch.identifier].element); } updateTouchInfo(); }); // touchmove事件处理 canvas.addEventListener('touchmove', function(e) { e.preventDefault(); // 遍历所有移动的触摸点 for (let i = 0; i < e.changedTouches.length; i++) { const touch = e.changedTouches[i]; if (touches[touch.identifier]) { // 更新触摸点位置 touches[touch.identifier].x = touch.clientX; touches[touch.identifier].y = touch.clientY; // 更新触摸点元素位置 const element = touches[touch.identifier].element; element.style.left = (touch.clientX - 25) + 'px'; element.style.top = (touch.clientY - 25) + 'px'; } } updateTouchInfo(); // 如果有两个触摸点，计算它们之间的距离和角度 const touchIds = Object.keys(touches); if (touchIds.length === 2) { const touch1 = touches[touchIds[0]]; const touch2 = touches[touchIds[1]]; const distance = Math.hypot( touch2.x - touch1.x, touch2.y - touch1.y ); const angle = Math.atan2( touch2.y - touch1.y, touch2.x - touch1.x ) * 180 / Math.PI; touchInfo.innerHTML += `<br>两点距离: ${distance.toFixed(2)}px, 角度: ${angle.toFixed(2)}°`; } }); // touchend事件处理 canvas.addEventListener('touchend', function(e) { e.preventDefault(); // 遍历所有结束的触摸点 for (let i = 0; i < e.changedTouches.length; i++) { const touch = e.changedTouches[i]; if (touches[touch.identifier]) { // 移除触摸点元素 canvas.removeChild(touches[touch.identifier].element); // 删除触摸点信息 delete touches[touch.identifier]; } } updateTouchInfo(); }); // 创建触摸点元素 function createTouchElement(x, y) { const element = document.createElement('div'); element.style.position = 'absolute'; element.style.left = (x - 25) + 'px'; element.style.top = (y - 25) + 'px'; element.style.width = '50px'; element.style.height = '50px'; element.style.borderRadius = '50%'; element.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; element.style.transform = 'translate(-50%, -50%)'; return element; } // 更新触摸信息显示 function updateTouchInfo() { const touchCount = Object.keys(touches).length; touchInfo.innerHTML = `当前触摸点数量: ${touchCount}`; } </script> </body> </html>

最佳实践与性能优化

1. 使用CSS动画代替JavaScript动画

CSS动画通常比JavaScript动画性能更好，因为它们可以由浏览器直接优化和硬件加速。

.element { transition: transform 0.3s ease; } .element.active { transform: scale(1.1); }

2. 使用requestAnimationFrame进行动画

如果必须使用JavaScript进行动画，使用requestAnimationFrame而不是setTimeout或setInterval。

let animationId; let lastTimestamp = 0; function animate(timestamp) { if (!lastTimestamp) lastTimestamp = timestamp; const deltaTime = timestamp - lastTimestamp; // 更新动画状态 updateAnimation(deltaTime); lastTimestamp = timestamp; animationId = requestAnimationFrame(animate); } // 开始动画 animationId = requestAnimationFrame(animate); // 停止动画 cancelAnimationFrame(animationId);

3. 使用硬件加速

通过CSS属性启用硬件加速，可以显著提高动画和过渡的性能。

.accelerated { transform: translateZ(0); /* 或者 */ will-change: transform; /* 或者 */ transform: translate3d(0, 0, 0); }

4. 减少重排和重绘

频繁的DOM操作会导致重排和重绘，影响性能。以下是一些减少重排和重绘的技巧：

// 不好的做法：在循环中直接修改样式 for (let i = 0; i < elements.length; i++) { elements[i].style.width = '100px'; } // 好的做法：使用类名切换 for (let i = 0; i < elements.length; i++) { elements[i].classList.add('fixed-width'); } // 更好的做法：使用文档片段 const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const div = document.createElement('div'); div.className = 'item'; fragment.appendChild(div); } container.appendChild(fragment);

5. 使用事件委托

对于大量元素的事件处理，使用事件委托可以减少内存使用和提高性能。

// 不好的做法：为每个项目添加事件监听器 const items = document.querySelectorAll('.item'); items.forEach(item => { item.addEventListener('touchstart', function() { // 处理触摸事件 }); }); // 好的做法：使用事件委托 const container = document.getElementById('container'); container.addEventListener('touchstart', function(e) { if (e.target.classList.contains('item')) { // 处理触摸事件 console.log('Item touched:', e.target.textContent); } });

6. 懒加载和按需渲染

对于大量内容，使用懒加载和按需渲染可以提高初始加载性能。

// 懒加载示例 const lazyLoadImages = () => { const images = document.querySelectorAll('img[data-src]'); const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); } }); }); images.forEach(img => { imageObserver.observe(img); }); }; // 初始化懒加载 document.addEventListener('DOMContentLoaded', lazyLoadImages);

案例分析

案例1：移动端图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>移动端图片轮播</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; overflow: hidden; } .carousel-container { width: 100%; height: 300px; position: relative; overflow: hidden; } .carousel { display: flex; height: 100%; transition: transform 0.3s ease; } .carousel-item { min-width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px; color: white; user-select: none; } .carousel-item:nth-child(1) { background-color: #4CAF50; } .carousel-item:nth-child(2) { background-color: #2196F3; } .carousel-item:nth-child(3) { background-color: #FF9800; } .carousel-item:nth-child(4) { background-color: #9C27B0; } .carousel-indicators { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; } .indicator { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; } .indicator.active { background-color: white; } .carousel-controls { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; pointer-events: none; } .control { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.3); color: white; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; pointer-events: all; user-select: none; } </style> </head> <body> <div class="carousel-container"> <div class="carousel"> <div class="carousel-item">Slide 1</div> <div class="carousel-item">Slide 2</div> <div class="carousel-item">Slide 3</div> <div class="carousel-item">Slide 4</div> </div> <div class="carousel-indicators"> <div class="indicator active" data-index="0"></div> <div class="indicator" data-index="1"></div> <div class="indicator" data-index="2"></div> <div class="indicator" data-index="3"></div> </div> <div class="carousel-controls"> <div class="control prev">&lt;</div> <div class="control next">&gt;</div> </div> </div> <script> const carousel = document.querySelector('.carousel'); const indicators = document.querySelectorAll('.indicator'); const prevButton = document.querySelector('.prev'); const nextButton = document.querySelector('.next'); let currentIndex = 0; const totalItems = document.querySelectorAll('.carousel-item').length; // 触摸相关变量 let touchStartX = 0; let touchEndX = 0; let touchStartTime = 0; let isDragging = false; let startPos = 0; let currentTranslate = 0; let prevTranslate = 0; let animationId = 0; // 更新轮播位置 function updateCarouselPosition(index, animate = true) { if (index < 0) index = totalItems - 1; if (index >= totalItems) index = 0; currentIndex = index; if (animate) { carousel.style.transition = 'transform 0.3s ease'; } else { carousel.style.transition = 'none'; } carousel.style.transform = `translateX(-${index * 100}%)`; // 更新指示器 indicators.forEach((indicator, i) => { if (i === index) { indicator.classList.add('active'); } else { indicator.classList.remove('active'); } }); } // 下一张 function nextSlide() { updateCarouselPosition(currentIndex + 1); } // 上一张 function prevSlide() { updateCarouselPosition(currentIndex - 1); } // 指示器点击事件 indicators.forEach((indicator, index) => { indicator.addEventListener('click', () => { updateCarouselPosition(index); }); }); // 控制按钮点击事件 prevButton.addEventListener('click', prevSlide); nextButton.addEventListener('click', nextSlide); // 触摸开始 carousel.addEventListener('touchstart', e => { touchStartX = e.touches[0].clientX; touchStartTime = Date.now(); isDragging = true; startPos = currentIndex * -100; carousel.style.transition = 'none'; // 取消任何进行中的动画 cancelAnimationFrame(animationId); }, { passive: true }); // 触摸移动 carousel.addEventListener('touchmove', e => { if (!isDragging) return; const touchX = e.touches[0].clientX; const diff = touchX - touchStartX; currentTranslate = startPos + (diff / window.innerWidth) * 100; carousel.style.transform = `translateX(${currentTranslate}%)`; }, { passive: true }); // 触摸结束 carousel.addEventListener('touchend', e => { if (!isDragging) return; isDragging = false; touchEndX = e.changedTouches[0].clientX; const touchEndTime = Date.now(); const touchDuration = touchEndTime - touchStartTime; // 计算滑动距离和速度 const diff = touchStartX - touchEndX; const speed = Math.abs(diff) / touchDuration; // 判断是否应该切换到下一张或上一张 if (Math.abs(diff) > 50 || speed > 0.5) { if (diff > 0) { // 向左滑动，下一张 updateCarouselPosition(currentIndex + 1); } else { // 向右滑动，上一张 updateCarouselPosition(currentIndex - 1); } } else { // 回到当前位置 updateCarouselPosition(currentIndex); } }); // 自动播放 let autoplayInterval = setInterval(nextSlide, 5000); // 用户交互时暂停自动播放 carousel.addEventListener('touchstart', () => { clearInterval(autoplayInterval); }); // 用户交互结束后恢复自动播放 carousel.addEventListener('touchend', () => { clearInterval(autoplayInterval); autoplayInterval = setInterval(nextSlide, 5000); }); </script> </body> </html>

案例2：移动端下拉刷新

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动端下拉刷新</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; overflow: hidden; height: 100vh; display: flex; flex-direction: column; } .refresh-container { position: relative; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .refresh-indicator { position: absolute; top: -60px; left: 0; right: 0; height: 60px; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } .refresh-content { padding: 20px; } .item { padding: 15px; border-bottom: 1px solid #eee; } .spinner { width: 30px; height: 30px; border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #3498db; animation: spin 1s ease-in-out infinite; display: none; } @keyframes spin { to { transform: rotate(360deg); } } .arrow { width: 30px; height: 30px; position: relative; transition: transform 0.3s ease; } .arrow:before, .arrow:after { content: ''; position: absolute; background-color: #666; height: 3px; width: 15px; top: 50%; left: 50%; } .arrow:before { transform: translate(-50%, -50%) rotate(45deg); } .arrow:after { transform: translate(-50%, -50%) rotate(-45deg); } .arrow.down { transform: rotate(180deg); } .refresh-text { margin-left: 10px; color: #666; } </style> </head> <body> <div class="refresh-container" id="refreshContainer"> <div class="refresh-indicator" id="refreshIndicator"> <div class="arrow" id="refreshArrow"></div> <div class="spinner" id="refreshSpinner"></div> <div class="refresh-text" id="refreshText">下拉刷新</div> </div> <div class="refresh-content" id="refreshContent"> <div class="item">项目 1</div> <div class="item">项目 2</div> <div class="item">项目 3</div> <div class="item">项目 4</div> <div class="item">项目 5</div> <div class="item">项目 6</div> <div class="item">项目 7</div> <div class="item">项目 8</div> <div class="item">项目 9</div> <div class="item">项目 10</div> </div> </div> <script> const refreshContainer = document.getElementById('refreshContainer'); const refreshIndicator = document.getElementById('refreshIndicator'); const refreshArrow = document.getElementById('refreshArrow'); const refreshSpinner = document.getElementById('refreshSpinner'); const refreshText = document.getElementById('refreshText'); const refreshContent = document.getElementById('refreshContent'); let startY = 0; let currentY = 0; let isDragging = false; let isRefreshing = false; // 触摸开始 refreshContainer.addEventListener('touchstart', e => { // 只有在顶部时才能下拉刷新 if (refreshContainer.scrollTop === 0) { startY = e.touches[0].pageY; isDragging = true; } }, { passive: true }); // 触摸移动 refreshContainer.addEventListener('touchmove', e => { if (!isDragging || isRefreshing) return; currentY = e.touches[0].pageY; const diff = currentY - startY; // 只有向下拖动才有效 if (diff > 0) { // 阻止默认滚动行为 e.preventDefault(); // 计算下拉距离，添加阻力效果 const pullDistance = Math.min(diff * 0.5, 80); // 更新指示器位置 refreshIndicator.style.transform = `translateY(${pullDistance}px)`; // 更新箭头方向和文本 if (pullDistance > 50) { refreshArrow.classList.add('down'); refreshText.textContent = '释放刷新'; } else { refreshArrow.classList.remove('down'); refreshText.textContent = '下拉刷新'; } } }, { passive: false }); // 触摸结束 refreshContainer.addEventListener('touchend', () => { if (!isDragging) return; isDragging = false; // 如果下拉距离足够，触发刷新 if (currentY - startY > 50) { performRefresh(); } else { // 否则回弹 refreshIndicator.style.transform = 'translateY(0)'; refreshArrow.classList.remove('down'); refreshText.textContent = '下拉刷新'; } }); // 执行刷新 function performRefresh() { isRefreshing = true; // 显示加载动画 refreshArrow.style.display = 'none'; refreshSpinner.style.display = 'block'; refreshText.textContent = '刷新中...'; // 保持指示器位置 refreshIndicator.style.transform = 'translateY(60px)'; // 模拟网络请求 setTimeout(() => { // 添加新项目 const newItem = document.createElement('div'); newItem.className = 'item'; newItem.textContent = `新项目 ${Date.now()}`; refreshContent.insertBefore(newItem, refreshContent.firstChild); // 重置状态 refreshIndicator.style.transform = 'translateY(0)'; refreshArrow.style.display = 'block'; refreshArrow.classList.remove('down'); refreshSpinner.style.display = 'none'; refreshText.textContent = '下拉刷新'; isRefreshing = false; // 显示刷新完成提示 refreshText.textContent = '刷新完成'; setTimeout(() => { refreshText.textContent = '下拉刷新'; }, 1000); }, 2000); } </script> </body> </html>