iScroll_javascript スキルでイベント クリックが 2 回トリガーされる問題の解決策

私はこれまでに、この問題について論じた多くの友人の記事を読みました。たとえば、変数を使用して実行間隔などを記録します。毎回オナニーしなければいけない気がして、かなり疲れます。私はレンガを移動する前にツールを選択するのが好きです。実際、この問題の解決策は非常に簡単です。 iScroll は、ブラウザーがクリックされたときに実際に touchstart イベントと touchend イベントをインターセプトします。 js を使用して、end に触れたときに要素の onclick イベント (_end 関数) をトリガーします。実際の動作では、最初に touchend が実行され、次に onclick 関連関数が実行されます。これにより、1 回のクリックと 2 つのトリガーという面倒な作業が発生します。これはそもそも問題ではありません。これが問題となる理由は、iScroll のソース コードを確認する必要があるためです。この問題を解決する方法は、関数の 2 回目の実行を拒否することです。そして私のロジックも全く同じです。 _end 関数でクリック イベントをトリガーするコードを実行した後、onclick イベントにバインドされた関数を削除できます。次に、数百ミリ秒のタイミング後にイベントを再度追加します。例:

コードをコピーします コードは次のとおりです:

//処理前
ダブルクリックテスト
//処理後
ダブルクリック テスト

onclick 関連関数を削除すると、当然のことながらテスト関数は 2 回目にトリガーされなくなります。次回も引き続き使用するには、setTimeout を使用して onclick コンテンツを復元します。

変更された iscroll ソース コード (約 550 ～ 570 行、_end 関数内):

コードをコピー コードは次のとおりです:

that.doubleTapTimer = setTimeout(function () {
                            that.doubleTapTimer = null;
                            // 最後にタッチされた要素を検索します
                            ターゲット = 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);
                                /**以下のコードは新しいコードです**/
                                // クリック イベントの要素を検出します。
                                var obj = $(target).attr("onclick") != null ? $(ターゲット) : $(ターゲット).parents("[onclick]")[0];
                                if (obj != null) {
                                    var clickContent = $(obj).attr("onclick");
                                    if (clickContent != "void(0)") {
                                        // 新しいプロパティを利用して保存されるオリジナルのクリック関数
                                        $(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.splice(_i, 1);
休憩;
                                                                                                                                                                                                                                                 That.hashBox.push($(obj));
That._clickBack();
} } // end
}                                                                                                                                                                                                                                                              

_clickBack 関数と hashBox コード スニペット (_end 関数の前に追加)

コードをコピーします コードは次のとおりです:

ハッシュボックス: [],
/*クリックされたオブジェクトのイベントを復元*/
_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 のソースコードを変更せずに public 関数を通じて実装することもできます。

上記がこの記事のすべてです。iscroll スライディング コントロールの使い方を学ぶのに役立つことを願っています。