当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现滑动删除功能的实现方法

JS实现滑动删除功能的实现方法

2025-11-06 17:51:47 0浏览收藏

想知道如何用JS实现滑动删除功能吗？本文为你揭秘！通过监听触摸或鼠标事件，判断滑动距离，当滑动超过一定阈值时，即可显示删除按钮并执行删除操作。本文将详细介绍实现步骤，包括构建列表结构、CSS样式设置、JavaScript事件监听与处理，以及如何兼容鼠标拖动，让你的网页在移动端和桌面端都能拥有流畅的滑动删除体验。掌握事件监听、位移判断和样式控制这三大核心要素，轻松实现页面元素的滑动删除功能，提升用户体验！

答案：通过监听触摸或鼠标事件判断滑动距离，超过阈值时显示删除按钮并执行删除。具体实现包括：1. 构建列表结构并设置CSS隐藏删除按钮；2. 使用JavaScript记录起始位置，计算滑动偏移量，向左滑动超50px时添加slide类显示删除按钮；3. 点击删除按钮触发移除动画；4. 可扩展支持鼠标事件实现桌面端拖动删除；5. 注意区分滑动方向、优化动画及无障碍访问。核心为事件监听+位移判断+样式控制。

js脚本怎么实现页面元素滑动删除_js滑动删除功能脚本编写方法

要实现页面元素的滑动删除功能，可以通过监听触摸事件（touchstart、touchmove、touchend）或鼠标事件（mousedown、mousemove、mouseup）来判断用户是否在某个元素上进行横向滑动操作。当滑动距离达到设定阈值时，触发删除动作。以下是具体的实现方法。

1. 基本结构与样式

先构建一个简单的列表结构：

<ul id="list">
  <li class="item">内容 1 <span class="delete-btn">删除</span></li>
  <li class="item">内容 2 <span class="delete-btn">删除</span></li>
</ul>

添加基础CSS样式，隐藏删除按钮，滑动时显示：

.item {
  position: relative;
  list-style: none;
  padding: 15px;
  border-bottom: 1px solid #eee;
  background: #fff;
  overflow: hidden;
}
.delete-btn {
  position: absolute;
  top: 0;
  right: -60px;
  width: 60px;
  height: 100%;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 48px;
  transition: right 0.3s ease;
}
.item.slide > .delete-btn {
  right: 0;
}

2. 监听滑动操作

使用JavaScript绑定触摸/鼠标事件，判断滑动方向和距离：

关键步骤：

记录触摸起始位置（clientX）
监听移动过程，计算偏移量
若向左滑动超过阈值（如50px），显示删除按钮
点击删除按钮或滑回则隐藏

示例脚本：

document.addEventListener('DOMContentLoaded', function () {
  const list = document.getElementById('list');
<p>// 通用事件兼容处理
function addEvent(el, type, fn) {
el.addEventListener(type, fn, false);
}</p><p>addEvent(list, 'touchstart', handleTouchStart);
addEvent(list, 'touchmove', handleTouchMove);
addEvent(list, 'touchend', handleTouchEnd);</p><p>let startX = 0;
let currentEl = null;</p><p>function handleTouchStart(e) {
if (e.target.classList.contains('item') || e.target.parentElement.classList.contains('item')) {
currentEl = e.target.classList.contains('item') ? e.target : e.target.parentElement;
startX = e.touches[0].clientX;
}
}</p><p>function handleTouchMove(e) {
if (!currentEl) return;
const moveX = e.touches[0].clientX;
const diff = startX - moveX;</p><pre class="brush:php;toolbar:false;">if (diff > 50) {
  currentEl.classList.add('slide');
} else if (diff < 10) {
  currentEl.classList.remove('slide');
}

}

function handleTouchEnd() { currentEl = null; }

// 删除按钮点击 addEvent(list, 'click', function (e) { if (e.target.classList.contains('delete-btn')) { const item = e.target.parentElement; item.style.opacity = '0'; setTimeout(() => { item.remove(); }, 300); } }); });

3. 兼容鼠标拖动（可选）

如果希望在桌面端也支持滑动效果，可以同时绑定 mousedown、mousemove、mouseup 事件，逻辑类似，只是事件对象为 mouseEvent 而非 touchEvent。

例如：

addEvent(list, 'mousedown', handleTouchStart);
addEvent(list, 'mousemove', function(e) {
  if (!currentEl) return;
  // 使用 e.clientX 替代 touches
});
addEvent(list, 'mouseup', handleTouchEnd);