首页 > Js开发 > jquery mobile快速点击事件插件–解决tap点击2次的问题

jquery mobile快速点击事件插件–解决tap点击2次的问题

在jqm项目中,使用了Listview加载和展示数据,默认加载5条,当点击加载更多的时候,

获取新数据到Listview中,并刷新。

如图:

jquery mobile tap点击2次问题

原来步骤如下:

1)tap事件绑定:

        $('#aaddmore').bind('tap', function () {

GetArticleList(maxid);

});

2)Ajax数据请求返回后,回调函数--数据展示:

粗体部分是append函数,并调用listview的refresh刷新一下。

function GetArticleList(tempartiid) {

var AjaxUrl = "Data/Article.aspx?tp=1&Ad=" + tempartiid + "&sq=" + sd + "&ud=" + ud + "&ky=" + key;

//aaddmore

var html = "";

$.ajax({

type: "get",

url: AjaxUrl,

data: { minid: maxid },

success: function (data, textStatus) {

if (data != null) {

var html = "";

$.each(data, function (index, val) {//var sd =  $.request.queryString["clientId"];

html = html + "<li><a href=\"index.aspx?articleid=" + val.ArticleID + "&clientId=" + sd + "&openid=" + ud + "&key=" + key + " \" data-transition=\"slidedown\">";

html = html + "  <img src=\"" + val.Cover + "\"/> ";

html = html + "  <h2> " + val.Title + "</h2> <p class=\"classement four\"> " + val.Summary + " </p> </a></li>";

maxid = val.ArticleID;

});

  $("#thelist").append(html); $("#thelist").listview('refresh');

}

},

complete: function (XMLHttpRequest, textStatus) {

 

//HideLoading();

},

error: function (e) {

//请求出错处理

}

});

}

但是问题来了,如图。新数据和加载更多信息按钮会重叠,有tap的触发事件一般在300毫秒左右,所有在点击按钮完成后,

会接着点击新出现的数据。导致程序流程错误。

jquery mobile 快速点击插件

网上google和群里问了这个问题。

解决办法:

  1. 延迟加载:

    在加载html的地方,使用延迟时间加载的办法。

     

      $("#thelist").append(html); $("#thelist").listview('refresh'); 替换吃:  setTimeout(SHowHtml(html), 300);

    但是在我这个项目里,不管用。

  2. 使用快速点击事件插件:jQuery.Event.Special.Fastclick。项目地址;

    https://github.com/Plaputta/jquery.event.special.fastclick

    该插件支持一般的点击事件。它主要是用在移动浏览器上。因为移动端触摸tap事件

    在300ms左右,这样会带来最明显的就是上面的问题。

    使用方法:

    在引用jquery框架代码后,引用:

    <script src="Content/Scripts/jquery.event.special.fastclick.js" type="text/javascript"></script>

    调用方法:

$('#aaddmore').bind('fastclick', function () {

GetArticleList(maxid);

});

经过测试,该方法有效。


本文固定链接: http://www.devba.com/index.php/archives/2254.html | 开发吧

报歉!评论已关闭.