在互聯(lián)網(wǎng)應(yīng)用中，有許多需要實(shí)現(xiàn)左滑刪除的場景，比如我們在手機(jī)上刪除短信或者微信聊天記錄時，常常就需要左滑刪除。在Web開發(fā)領(lǐng)域中，我們同樣需要實(shí)現(xiàn)左滑刪除的功能，這里我們就來介紹一下如何使用JavaScript實(shí)現(xiàn)左滑刪除。
首先，我們需要先了解一下左滑刪除的原理，其實(shí)就是通過JavaScript監(jiān)聽touch事件，判斷手指滑動的距離，當(dāng)滑動距離超過一定的閾值，就觸發(fā)刪除操作。
接著，我們來看一下代碼實(shí)現(xiàn)。首先，在HTML中，我們需要準(zhǔn)備好需要刪除的元素，這里以一個ul列表為例：
<ul id="list"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul>
然后在JavaScript中，我們需要監(jiān)聽touch事件，判斷滑動距離是否超過閾值，如果超過就觸發(fā)刪除操作。代碼如下：
var initX; // 初始坐標(biāo)
var newX; // 新坐標(biāo)
function handleTouchStart(e) {
initX = e.touches[0].clientX;
};
function handleTouchMove(e) {
newX = e.touches[0].clientX;
};
function handleTouchEnd() {
if (initX - newX >100) { // 判斷滑動距離是否超過閾值
// 觸發(fā)刪除操作
var li = document.elementFromPoint(newX, initX);
var index = [].indexOf.call(li.parentNode.children, li);
li.parentNode.removeChild(li);
alert('您刪除了第' + (index+1) + '項');
}
};
var list = document.getElementById('list');
list.addEventListener('touchstart', handleTouchStart, false);
list.addEventListener('touchmove', handleTouchMove, false);
list.addEventListener('touchend', handleTouchEnd, false);我們通過addEventListener方法監(jiān)聽touch事件，當(dāng)用戶手指觸摸屏幕時，記錄初始坐標(biāo)，當(dāng)手指滑動時，記錄新的坐標(biāo)，當(dāng)手指離開屏幕時，判斷滑動距離是否超過閾值，如果超過就觸發(fā)刪除操作。
完整的代碼可以參考下面的示例：
<html>
<head>
<meta charset="utf-8">
<title>左滑刪除</title>
</head>
<body>
<ul id="list">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ul>
<script>
var initX; // 初始坐標(biāo)
var newX; // 新坐標(biāo)
function handleTouchStart(e) {
initX = e.touches[0].clientX;
};
function handleTouchMove(e) {
newX = e.touches[0].clientX;
};
function handleTouchEnd() {
if (initX - newX >100) { // 判斷滑動距離是否超過閾值
// 觸發(fā)刪除操作
var li = document.elementFromPoint(newX, initX);
var index = [].indexOf.call(li.parentNode.children, li);
li.parentNode.removeChild(li);
alert('您刪除了第' + (index+1) + '項');
}
};
var list = document.getElementById('list');
list.addEventListener('touchstart', handleTouchStart, false);
list.addEventListener('touchmove', handleTouchMove, false);
list.addEventListener('touchend', handleTouchEnd, false);
</script>
</body>
</html>總的來說，通過JavaScript實(shí)現(xiàn)左滑刪除非常簡單，只需監(jiān)聽touch事件并判斷滑動距離即可。感興趣的讀者可以自己嘗試實(shí)現(xiàn)一下，加深理解。