javascript实现左滑删除的方法：1、计算根节点HTML的字体大小；2、初始化根节点HTML的字体大小；3、设置侧滑显示删除按钮；4、通过“event.preventDefault()…”实现左滑删除即可。
本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
javascript怎么实现左滑删除？
纯 js左滑删除功能
代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>js侧滑显示删除按钮</title><style>*{margin:0;padding:0;}body{font-size:.14rem;}p{pst-style:none;}i{font-style:normal;}a{color:#393939;text-decoration:none;}.pst{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px sopd #ddd;}.pst p{overflow:hidden;width:120%;border-bottom:1px sopd #ddd;}.pst p a{display:block;height:.88rem;pne-height:.88rem;-webkit-transition:all 0.3s pnear;transition:all 0.3s pnear;}.pst p i{float:right;width:15%;text-apgn:center;background:#E2421B;color:#fff;}.swipeleft{transform:translateX(-15%);-webkit-transform:translateX(-15%);}</style><script>//计算根节点HTML的字体大小function resizeRoot(){ var deviceWidth = document.documentElement.cpentWidth, num = 750, num1 = num / 100; if(deviceWidth > num){ deviceWidth = num; } document.documentElement.style.fontSize = deviceWidth / num1 + "px";}//根节点HTML的字体大小初始化resizeRoot();window.onresize = function(){ resizeRoot();};</script></head><body><section><div class="pst"> <ul> <p><a href="#">侧滑显示删除按钮1<i>删除</i></a></p> <p><a href="#">侧滑显示删除按钮2<i>删除</i></a></p> <p><a href="#">侧滑显示删除按钮3<i>删除</i></a></p> </ul></div><script>//侧滑显示删除按钮var expansion = null; //是否存在展开的pstvar container = document.querySelectorAll('.pst p a');for(var i = 0; i < container.length; i++){ var x, y, X, Y, swipeX, swipeY; container[i].addEventListener('touchstart', function(event) { x = event.changedTouches[0].pageX; y = event.changedTouches[0].pageY; swipeX = true; swipeY = true ; if(expansion){ //判断是否展开，如果展开则收起 expansion.className = ""; } }); container[i].addEventListener('touchmove', function(event){ X = event.changedTouches[0].pageX; Y = event.changedTouches[0].pageY; // 左右滑动 if(swipeX && Math.abs(X – x) – Math.abs(Y – y) > 0){ // 阻止事件冒泡 event.stopPropagation(); if(X – x > 10){ //右滑 event.preventDefault(); this.className = ""; //右滑收起 } if(x – X > 10){ //左滑 event.preventDefault(); this.className = "swipeleft"; //左滑展开 expansion = this; } swipeY = false; } // 上下滑动 if(swipeY && Math.abs(X – x) – Math.abs(Y – y) < 0) { swipeX = false; } });}</script></body></html>
以上就是javascript怎么实现左滑删除的详细内容，更多请关注24小时课堂在线其它相关文章！
