快捷導(dǎo)航

iScroll中事件點(diǎn)擊觸發(fā)兩次解決方案

更新時(shí)間：2015年03月11日 09:52:01 投稿：hebedich

iScroll是我們?cè)谧鍪謾C(jī)網(wǎng)頁(yè)中常用的滑動(dòng)控件之一。單說(shuō)其功能已相當(dāng)豐富。但個(gè)別時(shí)候也是會(huì)掉坑的，正好這次就遇上了。在android的app中嵌入網(wǎng)頁(yè)時(shí)不少手機(jī)會(huì)出現(xiàn)一次點(diǎn)擊兩次觸發(fā)的現(xiàn)象。經(jīng)過(guò)一段時(shí)間的折騰，總算想到了一個(gè)還算合理的解決放案。

　　之前也看了很多朋友的文章里有講這個(gè)問(wèn)題。比如使用一個(gè)變量記錄執(zhí)行的間隔時(shí)間什么的。感覺(jué)每次都要去擼一下，比較累人。本人喜歡搬磚前先選工具。其實(shí)解決這個(gè)方法很簡(jiǎn)單。iScroll呢其實(shí)是截獲了點(diǎn)擊瀏覽器時(shí)的touchstart和touchend事件。在touchend的時(shí)候使用js去觸發(fā)元素的onclick事件(_end這個(gè)函數(shù))。而在實(shí)際操作中，先執(zhí)行了touchend，然后再執(zhí)行了一次onclick的相關(guān)函數(shù)。這樣就形成了頭疼的一次點(diǎn)擊兩次觸發(fā)。這本來(lái)就一個(gè)不是問(wèn)題的問(wèn)題。之所以說(shuō)這是個(gè)問(wèn)題，是因?yàn)檫@樣是我們不得不去看一看iScroll的源代碼。解決這個(gè)問(wèn)題的途徑就是拒絕第二次執(zhí)行函數(shù)。而我的邏輯也正是如此。我們可以在執(zhí)行完_end函數(shù)中的觸發(fā)click事件的代碼后，移除onclick事件上綁定的函數(shù)。然后在定時(shí)幾百毫秒之后在重新把這個(gè)事件添加上去。舉個(gè)例子：

復(fù)制代碼代碼如下:

//處理之前

<span onclick="test()">雙擊測(cè)試</span>

//處理之后

<span onclick="void(0)">雙擊測(cè)試</span>

在移除onclick相關(guān)函數(shù)之后這個(gè)第二次就自然不會(huì)再觸發(fā)test函數(shù)了。為了下一次還能繼續(xù)使用我們可以使用setTimeout的方式把onclick的內(nèi)容還原回去。

改造后的iscroll源代碼(約550行~570行的樣子，_end函數(shù)中)：

復(fù)制代碼代碼如下:

that.doubleTapTimer = setTimeout(function () {

                            that.doubleTapTimer = null;

                            // Find the last touched element

                            target = point.target;

                            while (target.nodeType != 1) target = target.parentNode;

                            if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {

                                ev = doc.createEvent('MouseEvents');

                                ev.initMouseEvent('click', true, true, e.view, 1,

                                    point.screenX, point.screenY, point.clientX, point.clientY,

                                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,

                                    0, null);

                                ev._fake = true;

                                target.dispatchEvent(ev);

                                /**以下代碼為新增代碼**/

                                //找到綁定click事件的元素。

                                var obj = $(target).attr("onclick") != null ? $(target) : $(target).parents("[onclick]")[0];

                                if (obj != null) {

                                    var clickContent = $(obj).attr("onclick");

                                    if (clickContent != "void(0)") {

                                        //利用新的屬性來(lái)存儲(chǔ)原有的click函數(shù)

                                        $(obj).attr("data-clickbak", $(obj).attr("onclick"));

                                        //改變onclick屬性值。

                                        $(obj).attr("onclick", "void(0)");

                                        //防止暴力點(diǎn)擊

                                        if (that.hashBox.length>0) {

                                            for (var _i = 0; _i < that.hashBox.length; _i++)

                                            {

                                                if (that.hashBox[_i] == $(obj)) {

                                                    that.hashBox.splice(_i, 1);

                                                    break;

                                                }

                                            }

                                        }  

                                        that.hashBox.push($(obj));

                                        that._clickBack();

                                    }

                                }//end

                            }

                        }, that.options.zoom ? 250 : 0);

_clickBack函數(shù)及hashBox代碼片段（加在_end函數(shù)之前）

復(fù)制代碼代碼如下:

       hashBox: [],

       /*還原被點(diǎn)擊對(duì)象的事件*/

        _clickBack: function () {

            var that = this;

            setTimeout(function () {

                if (that.hashBox.length > 0) {

                    var obj = that.hashBox.pop();

                    obj.attr("onclick", obj.attr("data-clickbak"));

                    if (that.hashBox.length > 0) that._clickBack();

                }

            }, 500);

        }

當(dāng)然，也可以不修改 iscroll源代碼，通過(guò)一個(gè)公共函數(shù)來(lái)實(shí)現(xiàn)。

以上就是本文所講述的全部?jī)?nèi)容了，希望對(duì)大家學(xué)習(xí)使用iscroll滑動(dòng)控件有所幫助

您可能感興趣的文章: