Pertanyaan bagaimana membedakan peristiwa klik tunggal dan peristiwa klik ganda?


Saya memiliki satu tombol di li dengan id "my_id". saya lampirkan two jquery acara dengan elemen ini

1.  $("#my_id").click(function() { 
            alert('single click');
    });

2.   $("#my_id").dblclick(function() {
              alert('double click');
    });

Tapi setiap kali itu memberi saya single click


76
2018-03-31 08:24


asal


Jawaban:


Anda perlu menggunakan batas waktu untuk memeriksa apakah ada klik lain setelah klik pertama.

Inilah triknya:

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Pemakaian:

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})
<button>Click Me!</button>

EDIT:

Seperti yang dinyatakan di bawah ini, lebih suka menggunakan penduduk asli dblclick peristiwa: http://www.quirksmode.org/dom/events/click.html

Atau yang disediakan oleh jQuery: http://api.jquery.com/dblclick/


44
2018-03-31 08:30



Perilaku dari dblclick acara dijelaskan di Quirksmode.

Urutan acara untuk a dblclick aku s:

  1. mousedown
  2. mouseup
  3. klik
  4. mousedown
  5. mouseup
  6. klik
  7. dblclick

Satu-satunya pengecualian untuk aturan ini adalah (tentu saja) Internet Explorer dengan pesanan khusus mereka:

  1. mousedown
  2. mouseup
  3. klik
  4. mouseup
  5. dblclick

Seperti yang Anda lihat, mendengarkan kedua acara bersama-sama pada elemen yang sama akan menghasilkan panggilan ekstra ke Anda click pawang


67
2018-04-01 09:30



Suatu fungsi sederhana. Tidak ada jquery atau kerangka lain yang diperlukan. Lewati fungsi Anda sebagai parameter

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>

16
2018-04-16 09:16



Saya khawatir bahwa perilakunya tergantung pada peramban:

Ini tidak disarankan untuk mengikat penangan   baik peristiwa klik dan dblclick untuk   elemen yang sama. Urutan dari   peristiwa yang dipicu bervariasi dari browser   ke browser, dengan beberapa menerima dua   klik kejadian sebelum dblclick dan   yang lain hanya satu. Klik dua kali   sensitivitas (waktu maksimum antara   klik yang terdeteksi sebagai dobel   klik) dapat bervariasi berdasarkan sistem operasi   dan peramban, dan sering   dapat dikonfigurasi pengguna.

http://api.jquery.com/dblclick/

Menjalankan kode Anda di Firefox, peringatan () di click() handler mencegah Anda mengklik untuk kedua kalinya. Jika Anda menghapus peringatan seperti itu, Anda mendapatkan keduanya.


12
2018-03-31 08:30



Nah untuk double klik (klik dua kali) Anda harus klik pertama kali. Itu click() handler kebakaran pada klik pertama Anda, dan sejak peringatan itu muncul, Anda tidak memiliki kesempatan untuk membuat klik kedua untuk memecat dblclick() pawang

Ubah penangan Anda untuk melakukan sesuatu selain dari alert() dan Anda akan melihat perilaku. (mungkin mengubah warna latar belakang elemen):

$("#my_id").click(function() { 
    $(this).css('backgroundColor', 'red')
});

$("#my_id").dblclick(function() {
    $(this).css('backgroundColor', 'green')
});

8
2018-03-31 08:29



Tak satu pun dari jawaban ini memuaskan kebutuhan saya sehingga saya menciptakan solusi yang terinspirasi oleh intisari yang diposting oleh @AdrienSchuler. Gunakan solusi ini hanya ketika Anda ingin mengikat satu klik dan klik dua kali ke elemen. Kalau tidak, saya sarankan menggunakan penduduk asli click dan dblclick pendengar.

Ini adalah perbedaannya:

  • Vanillajs, Tanpa ketergantungan
  • Jangan menunggu setTimeout untuk menangani pengontrol klik atau klik ganda
  • Ketika mengklik dua kali, pertama-tama akan mengaktifkan handler klik, kemudian handler doubleclick

Javascript:

function makeDoubleClick(doubleClickCallback, singleClickCallback) {
    var clicks = 0, timeout;
    return function() {
        clicks++;
        if (clicks == 1) {
            singleClickCallback && singleClickCallback.apply(this, arguments);
            timeout = setTimeout(function() { clicks = 0; }, 400);
        } else {
            timeout && clearTimeout(timeout);
            doubleClickCallback && doubleClickCallback.apply(this, arguments);
            clicks = 0;
        }
    };
}

Pemakaian:

var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));

Di bawah ini adalah penggunaan dalam jsfiddle, tombol jQuery adalah perilaku dari jawaban yang diterima.

jsfiddle


5
2017-10-10 09:59



Solusi Vanilla sederhana lainnya berdasarkan pada A1rPun jawaban (lihat biolanya untuk solusi jQuery, dan keduanya ada di yang ini).

Tampaknya untuk TIDAK memicu penangan sekali klik saat pengguna mengklik dua kali, penangan sekali klik tentu dipicu setelah penundaan ...

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};

var makeDoubleClick = function(e) {

  var clicks = 0,
      timeout;

  return function (e) {

    clicks++;

    if (clicks == 1) {
      timeout = setTimeout(function () {
        single(e);
        clicks = 0;
      }, 250);
    } else {
      clearTimeout(timeout);
      double(e);
      clicks = 0;
    }
  };
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);

4
2018-03-22 17:08



Berikut adalah alternatif kode jeum untuk sejumlah kejadian acak:

 var multiClickHandler = function (handlers, delay) {
    var clicks = 0, timeout, delay = delay || 250;
    return function (e) {
      clicks++;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        if(handlers[clicks]) handlers[clicks](e);
        clicks = 0;
      }, delay);
    };
  }

  cy.on('click', 'node', multiClickHandler({
    1: function(e){console.log('single clicked ', e.cyTarget.id())},
    2: function(e){console.log('double clicked ', e.cyTarget.id())},
    3: function(e){console.log('triple clicked ', e.cyTarget.id())},
    4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
    // ...
  }, 300));

Membutuhkan ini untuk cytoscape.js aplikasi.


3
2018-05-04 16:43