jquery+原生实现滑动删除效果

最新推荐文章于 2024-04-18 11:35:17 发布

Leo-hzj

最新推荐文章于 2024-04-18 11:35:17 发布

阅读量2.4k

点赞数 2

分类专栏： jquery javascript 文章标签：滑动删除滑动删除功能 jquery滑动删除功能

本文链接：https://blog.csdn.net/q36835109/article/details/80852853

版权

刚写完项目，难得有空闲时间，记录一下滑动删除效果所遇到的坑。。

使用的方法事件：

touchstart

touchmove

touchend

dblclick (使用dblclick主要是为了PC端也能正常使用删除功能，如果嫌双击麻烦，改为click也可以)

本来打算直接使用jquery去写的，但是写着写着发现，preventDefault()和stopPropagation()阻止默认事件不起作用，后来一番google百度之后，才发现google浏览器在56版本之后，默认开启了passive:true,导致浏览器忽略了检测函数内的preventDefault()和stopPropagation()。而我使用的是jquery1.11版本，不知道是不是版本太低的原因，没办法修改passive，所以只能使用jquery+原生结合了。

还有一点需要注意的是，如果使用position:relative或者margin来改变元素位置，在ios设备下，手指离开屏幕后再次滑动会不起作用。使用position:absolute则正常。（待大神来回答这个问题。）

滑动删除功能还有点小瑕疵，如果哪位大神能发现问题。完善一下再发我一个版本，那就太感谢了。。。

废话不多说，下面直接上代码了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>滑动删除</title>
    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <style type="text/css">
        * {
            margin:0 auto;
            padding: 0;
            touch-action: none;
        }

        body{
            overflow: hidden;
        }

        .list-box{
            width: 100%;
            height: 65px;
            overflow: hidden;
            border-bottom: 1px solid #000000;
        }

        .touch-box{
            position: absolut

最低0.47元/天解锁文章

Leo-hzj

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jquery+原生实现滑动删除效果

刚写完项目，难得空闲时间，记录一下滑动删除效果所遇到的坑。。使用的方法事件：touchstarttouchmovetouchenddblclick (使用dblclick主要是为了PC端也能正常使用删除功能，如果嫌双击麻烦，改为click也可以)本来打算直接使用jquery去写的，但是写着写着发现，preventDefault()和stopPropagation()阻止默认事件不起作用，后来一番g...
复制链接

扫一扫