美文网首页
微信端长按删除

微信端长按删除

作者: hey_前端豆 | 来源:发表于2017-05-10 17:00 被阅读0次

先要引用zepto.js 使用zepto自带的touchstart 和 touchend函数来监听触摸事件。
本方法采用zepto+js

    //长按删除
    $.fn.longPress = function(fn) {
        var timeout = undefined;
        var $this = this;
        console.log(this);
        for(var i = 0;i<$this.length;i++){
            $this[i].addEventListener('touchstart', function(event) {
              console.log(event);
                var target = event.target;
                console.log(target);
                var hdId = target.getAttribute('hdId');
                timeout = setTimeout(function(e){
                    layer.confirm('您确定要删除吗?', {
                        btn: ['确认','取消'] //按钮
                    }, function(){
                        console.log(hdId);
                        var info = {
                          hdId:hdId,
                        }
                        $.ajax({
                          url:"http://test.xxdoctor.cn/wechat/HealthFile/delHisDiacrisisInfo",
                          type:"POST",
                          data:JSON.stringify(info),
                          contentType: "application/json; charset=utf-8",
                          success:function(data){
                              layer.msg('已删除', {icon: 1});
                              moduleValue();
                          },
                          error:function(err){
                              console.log(err);
                          }
                      })
                    });
                }, 800);  //长按时间超过800ms,则执行传入的方法
                event.preventDefault();
            }, false);
            $this[i].addEventListener('touchend', function(event) {
                clearTimeout(timeout);  //长按时间少于800ms,不会执行传入的方法
            }, false);
        }
    }

    $('.family-illness').longPress(function(e){

    });

family-illness为父元素,它的子元素是动态生成的。因此用target获取目标元素

相关文章

  • 微信端长按删除

    先要引用zepto.js 使用zepto自带的touchstart 和 touchend函数来监听触摸事件。本方法...

  • 阻止长按手机屏幕出现的选中事件

    阻止手机端长按或pc端(微信端)点击后出现的选中事件 1.微信端/pc 2.app端

  • 禁止微信浏览器长按菜单

    最近做了一个微信端付款页面,在实现长按删除键清空输入框时,微信浏览器弹出系统菜单,体验非常差。 尝试使用user-...

  • [每天进步一点点~] uni-app @longpress长按触

    uni-app @longpress长按触发事件,长按某个列表项或按钮弹出弹窗 在微信和h5端只有longpres...

  • 微信读书删除卡片推荐的隐藏功能

    功能描述:长按卡片向上滑动可删除书籍卡片信息(微信自带的“好书分享免费领”“本周热榜”等无法删除),删除后该书籍的...

  • 移动端实现长按删除

    最近在做一个订单列表,实现的功能是长按删除,值得注意的点是:该订单还有点按进入详情功能,因此,我一开始还以为会冲突...

  • LayaAir微信端长按识别二维码

    LayaAir微信端长按识别二维码 LayaAir之类的h5引擎是基于Canvas来实现页面交互,微信长按识别二维...

  • 你总是喜欢自欺欺人

    QQ消息你左划点击删除,微信消息你长按点击删除,你觉得这样相当于没有收到过这条消息,没有发过这么一句...

  • 移动端H5模拟长按行为

    需求: 点击编辑, 长按删除 环境: 移动端H5 思路: 使用touchstart事件 +touchend事件 +...

  • 关于微信

    微信为什么不做好友批量删除 对话列表批量删除 有模仿iOS通讯录吗 pc端需依靠移动端登入,且移动端登出,pc端也会登出

网友评论

      本文标题:微信端长按删除

      本文链接:https://www.haomeiwen.com/subject/bzegtxtx.html