快捷導(dǎo)航

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

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

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

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

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

//處理之前

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

//處理之后

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

在移除onclick相關(guān)函數(shù)之后這個第二次就自然不會再觸發(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)") {

                                        //利用新的屬性來存儲原有的click函數(shù)

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

                                        //改變onclick屬性值。

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

                                        //防止暴力點擊

                                        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: [],

       /*還原被點擊對象的事件*/

        _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源代碼，通過一個公共函數(shù)來實現(xiàn)。

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

您可能感興趣的文章: