iScroll中事件點擊觸發兩次解決方案_javascript技巧

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

複製程式碼 程式碼如下:

//處理前
雙擊測試
//處理之後
雙擊測試

在移除onclick相關函數之後這個第二次就自然不會再觸發test函數了。為了下次還能繼續用我們可以使用setTimeout的方式把onclick的內容還原回去。

改造後的iscroll原始碼(約550行~570行的樣子，_end函數中)：

複製程式碼 程式碼如下:

that.doubleTapTimer = setTimeout(function () {
                            that.doubleTapTimer = null;
                            // 找到最後且被觸摸的元素
                            目標=點.目標;
                            while (target.nodeType != 1) target🎜>;;                                , target.dispatchEvent(ev);                                / /**以下程式碼為新增程式碼**/
                     為
                             地 🎜>                                                                  地                                  地                                                                                                             地
                                                                                                                                                              for (var _i = 0; _i                                                                                                                 🎜>                                                                                                                                                                                                                                                                         }
}
                                }//end
                            }
                        }, that.options.zoom ? 250 : 0);

_clickBack函數及hashBox程式碼片段（加在_end函數之前）

複製程式碼 程式碼如下:

       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);
        }

當然，也可以不修改 iscroll原始碼，透過一個公用函數來實現。

以上就是本文所講述的全部內容了，希望對大家學習使用iscroll滑動控制有所幫助