js脚本怎么实现页面元素滑动删除_js滑动删除功能脚本编写方法-js教程-PHP中文网

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

星夢妙者

发布： 2025-11-15 22:28:50

原创

896人浏览过

答案：通过监听触摸或鼠标事件判断滑动距离，超过阈值时显示删除按钮并执行删除。具体实现包括：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），显示删除按钮
点击删除按钮或滑回则隐藏

示例脚本：

一览AI编剧

创意生成+情节生成+脚本生成，AI编剧3步走，AI自动帮你搞定剧情！

查看详情

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);

登录后复制