微信端长按删除

先要引用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获取目标元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、 基础事件 1.click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200...
    满天繁星_28c5阅读 670评论 0 0
  • 在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1...
    IT老马阅读 5,125评论 1 20
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    Zoemings阅读 6,567评论 0 12
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 777评论 0 2
  • 这几天的生活平静而匆忙,培训的活动使人繁忙,狗狗的被盗,父亲的忧伤,在杂乱如垃圾场中的大叔,都让人有一丝的...
    蓝精灵森林阅读 370评论 0 0