Rumah  >  Artikel  >  hujung hadapan web  >  Penyelesaian untuk mencetuskan klik peristiwa dua kali dalam kemahiran iScroll_javascript

Penyelesaian untuk mencetuskan klik peristiwa dua kali dalam kemahiran iScroll_javascript

WBOY
WBOYasal
2016-05-16 16:10:251562semak imbas

Saya telah membaca banyak artikel rakan membincangkan isu ini sebelum ini. Sebagai contoh, gunakan pembolehubah untuk merekodkan selang pelaksanaan atau sesuatu. Rasa macam kena melancap setiap kali memang agak memenatkan. Saya suka memilih alatan sebelum mengalihkan batu bata. Malah, penyelesaian kepada masalah ini sangat mudah. iScroll sebenarnya memintas peristiwa mula sentuh dan akhir sentuh apabila penyemak imbas diklik. Gunakan js untuk mencetuskan acara onclick elemen (fungsi _end) apabila menyentuh hujung. Dalam operasi sebenar, touchend dilaksanakan dahulu, dan kemudian fungsi berkaitan onclick dilaksanakan. Ini menimbulkan sakit kepala satu klik dan dua pencetus. Ini bukan masalah pada mulanya. Sebab mengapa ini menjadi masalah ialah kita perlu melihat kod sumber iScroll. Cara untuk menyelesaikan masalah ini adalah dengan menolak untuk melaksanakan fungsi untuk kali kedua. Dan logik saya betul-betul sama. Kita boleh mengalih keluar fungsi yang terikat pada acara onclick selepas melaksanakan kod yang mencetuskan acara klik dalam fungsi _end. Kemudian tambahkan acara itu semula selepas beberapa ratus milisaat masa. Contohnya:

Salin kod Kod adalah seperti berikut:

//Sebelum memproses
Double-click test
//Selepas memproses
Ujian klik dua kali

Selepas mengalih keluar fungsi berkaitan onclick, fungsi ujian secara semula jadi tidak akan dicetuskan untuk kali kedua. Untuk terus menggunakannya pada masa akan datang, kami boleh menggunakan setTimeout untuk memulihkan kandungan onclick.

Kod sumber iskrol yang diubah suai (kira-kira 550 hingga 570 baris, dalam fungsi _end):

Salin kod Kod adalah seperti berikut:

that.doubleTapTimer = setTimeout(fungsi () {
                            that.doubleTapTimer = null;
                            // Cari elemen yang terakhir disentuh
                            sasaran = titik.sasaran;
                            manakala (target.nodeType != 1) target = target.parentNode;
                            jika (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
                                ev = doc.createEvent('MouseEvents');
                                ev.initMouseEvent('klik', benar, benar, e.view, 1,
                                    point.screenX, point.screenY, point.clientX, point.clientY,
                                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                                    0, batal);
                                ev._palsu = benar;
                                target.dispatchEvent(ev);
                                /**Kod berikut ialah kod baharu**/
                                //找到绑定klik事件的元素。
                                var obj = $(target).attr("onclick") != null ? $(sasaran): $(sasaran). ibu bapa("[onklik]")[0];
                                jika (obj != null) {
                                    var clickContent = $(obj).attr("onclick");
                                    if (clickContent != "void(0)") {
                                        //利用新的属性来存储原有的click函数
                                        $(obj).attr("data-clickbak", $(obj).attr("onclick"));
//Tukar nilai atribut onclick.
$(obj).attr("onclick", "void(0)");
//Halang klik ganas
Jika (that.hashBox.length>0) {
untuk (var _i = 0; _i < that.hashBox.length; _i )
                                                                                                                                                                                                                            That.hashBox.splice(_i, 1);
rehat;
                                                                                                                                                                                                                                                That.hashBox.push($(obj));
That._clickBack();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }                                                                                                                                                                                                                                                                                                                                                                                                                    //tamat
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

Fungsi _clickBack dan coretan kod hashBox (ditambah sebelum fungsi _end)

Salin kod Kod adalah seperti berikut:

        kotak cincang: [],
/*Pulihkan peristiwa objek yang diklik*/
​​​ _clickBack: fungsi () {
            var that = this;
              setTimeout(fungsi () {
Jika (that.hashBox.length > 0) {
                    var obj = that.hashBox.pop();
                                                                 obj.attr("onclick", obj.attr("data-clickbak"));
Jika (that.hashBox.length > 0) that._clickBack();
                }
             }, 500);
}

Sudah tentu, ia juga boleh dilaksanakan melalui fungsi awam tanpa mengubah suai kod sumber iscroll.

Di atas adalah semua kandungan artikel ini saya harap ia akan membantu semua orang untuk belajar menggunakan kawalan gelongsor iscroll

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn