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;}li{list-style:none;}i{font-style:normal;}a{color:#393939;text-decoration:none;}.list{overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid #ddd;}.list li{overflow:hidden;width:120%;border-bottom:1px solid #ddd;}.list li a{display:block;height:.88rem;line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}.list li i{float:right;width:15%;text-align:center;background:#e2421b;color:#fff;}.swipeleft{transform:translatex(-15%);-webkit-transform:translatex(-15%);}</style><script>//计算根节点html的字体大小function resizeroot(){ var devicewidth = document.documentelement.clientwidth, 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="list"> <ul> <li><a href="#">侧滑显示删除按钮1<i>删除</i></a></li> <li><a href="#">侧滑显示删除按钮2<i>删除</i></a></li> <li><a href="#">侧滑显示删除按钮3<i>删除</i></a></li> </ul></div><script>//侧滑显示删除按钮var expansion = null; //是否存在展开的listvar container = document.queryselectorall('.list li 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基础教程》
以上就是javascript怎么实现左滑删除的详细内容。