Làm cách nào để phân biệt sự kiện nhấp một lần và sự kiện nhấp đúp?

Tôi có một nút duy nhất bằng li với id "my_id". Tôi đã đính kèm hai sự kiện jQuery với phần tử này

1.

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

2.

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

Nhưng mỗi lần nó mang lại cho tôi single click

Bạn cần sử dụng thời gian chờ để kiểm tra xem có một lần nhấp khác sau lần nhấp đầu tiên hay không.

Đây là mẹo :

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

Sử dụng:

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

<button>Click Me!</button>

BIÊN TẬP:

Như đã nêu bên dưới, ưu tiên sử dụng dblclicksự kiện gốc : http://www.quirksmode.org/dom/events/click.html

Hoặc cái do jQuery cung cấp: http://api.jquery.com/dblclick/

Hành vi của dblclicksự kiện được giải thích tại Quirksmode .

Thứ tự các sự kiện của a dblclicklà:

1. Di chuột xuống
2. chuột lên
3. nhấp chuột
4. Di chuột xuống
5. chuột lên
6. nhấp chuột
7. dblclick

Một ngoại lệ cho quy tắc này là (tất nhiên) Internet Explorer với thứ tự tùy chỉnh của chúng là:

1. Di chuột xuống
2. chuột lên
3. nhấp chuột
4. chuột lên
5. dblclick

Như bạn có thể thấy, việc lắng nghe cả hai sự kiện cùng nhau trên cùng một phần tử sẽ dẫn đến các cuộc gọi bổ sung cho clicktrình xử lý của bạn .

Thay vì sử dụng nhiều trạng thái đặc biệt và setTimeout, hóa ra có một thuộc tính gốc được gọi là detailbạn có thể truy cập từ eventđối tượng!

element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};

Các trình duyệt hiện đại và ngay cả IE-9 cũng hỗ trợ nó :)

Nguồn: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

Một chức năng đơn giản. Không cần jquery hoặc khuôn khổ khác. Chuyển các chức năng của bạn dưới dạng tham số

<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>

Tôi e rằng hành vi phụ thuộc vào trình duyệt:

Không thể chấp nhận ràng buộc các trình xử lý với cả sự kiện nhấp chuột và dblclick cho cùng một phần tử. Chuỗi sự kiện được kích hoạt khác nhau giữa các trình duyệt, với một số nhận được hai sự kiện nhấp chuột trước dblclick và những sự kiện khác chỉ một. Độ nhạy của nhấp đúp (thời gian tối đa giữa các nhấp chuột được phát hiện là nhấp đúp) có thể thay đổi tùy theo hệ điều hành và trình duyệt và thường do người dùng định cấu hình.

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

Chạy mã của bạn trong Firefox, cảnh báo () trong click()trình xử lý ngăn bạn nhấp vào lần thứ hai. Nếu bạn xóa cảnh báo như vậy, bạn sẽ nhận được cả hai sự kiện.

Để nhấp đúp (nhấp hai lần), trước tiên bạn phải nhấp một lần. Trình click()xử lý sẽ kích hoạt trong lần nhấp đầu tiên của bạn và vì cảnh báo bật lên, bạn không có cơ hội thực hiện lần nhấp thứ hai để kích hoạtdblclick() trình xử lý.

Thay đổi trình xử lý của bạn để làm điều gì đó khác với một alert()và bạn sẽ thấy hành vi. (có thể thay đổi màu nền của phần tử):

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

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

Câu trả lời này đã lỗi thời theo thời gian, hãy kiểm tra giải pháp của @ kyw.

Tôi đã tạo một giải pháp lấy cảm hứng từ ý chính được đăng bởi @AdrienSchuler. Chỉ sử dụng giải pháp này khi bạn muốn liên kết một cú nhấp chuột VÀ một lần nhấp đúp vào một phần tử. Nếu không, tôi khuyên bạn nên sử dụng bản gốc clickvàdblclick người nghe.

Đây là những điểm khác biệt:

• Vanillajs, Không phụ thuộc
• Đừng chờ đợi trên setTimeout xử lý nhấp chuột hoặc xử lý nhấp đúp
• Khi nhấp đúp, đầu tiên nó sẽ kích hoạt trình xử lý nhấp chuột, sau đó trình xử lý nhấp đúp

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

Sử dụng:

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

Dưới đây là cách sử dụng trong jsfiddle, nút jQuery là hành vi của câu trả lời được chấp nhận.

jsfiddle

Một giải pháp Vanilla đơn giản khác dựa trên câu trả lời A1rPun (xem tài liệu về giải pháp jQuery của anh ấy và cả hai đều nằm trong câu trả lời này ).

Có vẻ như KHÔNG kích hoạt trình xử lý nhấp một lần khi người dùng nhấp đúp, trình xử lý nhấp một lần nhất thiết phải được kích hoạt sau một khoảng thời gian trễ ...

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

Đây là một mã thay thế của mã jeum cho một số sự kiện tùy ý:

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

Cần cái này cho ứng dụng cytoscape.js .

Làm thế nào để phân biệt giữa nhấp chuột đơn và nhấp đúp trên một và cùng một phần tử?

Nếu bạn không cần phải kết hợp chúng, bạn có thể dựa vào clickvà dblclickvà mỗi thứ sẽ thực hiện công việc tốt.

Một vấn đề nảy sinh khi cố gắng kết hợp chúng: một dblclicksự kiện sẽ thực sự kích hoạt một clicksự kiện , vì vậy bạn cần xác định xem một nhấp chuột duy nhất là nhấp chuột đơn "độc lập" hay là một phần của nhấp chuột đúp.

Ngoài ra: bạn không nên sử dụng cả hai clickvà dblclicktrên một và cùng một phần tử :

Không thể cố gắng liên kết các trình xử lý với cả sự kiện nhấp chuột và dblclick cho cùng một phần tử. Chuỗi sự kiện được kích hoạt thay đổi giữa các trình duyệt, với một số nhận được hai sự kiện nhấp chuột trước dblclick và những sự kiện khác chỉ một. Độ nhạy của nhấp đúp (thời gian tối đa giữa các nhấp chuột được phát hiện là nhấp đúp) có thể khác nhau tùy theo hệ điều hành và trình duyệt và thường do người dùng định cấu hình.
Nguồn: https://api.jquery.com/dblclick/

Bây giờ đến tin tốt:

Bạn có thể sử dụng thuộc tính của sự kiện detailđể phát hiện số lượng nhấp chuột liên quan đến sự kiện. Điều này làm cho nhấp đúp vào bên trongclick khá dễ phát hiện.

Vấn đề vẫn là phát hiện các nhấp chuột đơn lẻ và liệu chúng có phải là một phần của nhấp chuột kép hay không. Vì vậy, chúng tôi quay lại sử dụng bộ hẹn giờ vàsetTimeout .

Kết hợp tất cả lại với nhau, với việc sử dụng thuộc tính dữ liệu (để tránh biến toàn cục) và không cần tự tính số lần nhấp, chúng tôi nhận được:

HTML:

<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>

<div id="log" style="background: #efefef;"></div>

JavaScript:

<script>
var clickTimeoutID;
$( document ).ready(function() {

    $( '.clickit' ).click( function( event ) {

        if ( event.originalEvent.detail === 1 ) {
            $( '#log' ).append( '(Event:) Single click event received.<br>' );

            /** Is this a true single click or it it a single click that's part of a double click?
             * The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
             **/
            clickTimeoutID = window.setTimeout(
                    function() {
                        $( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
                    },
                    500 // how much time users have to perform the second click in a double click -- see accessibility note below.
                );

        } else if ( event.originalEvent.detail === 2 ) {
            $( '#log' ).append( '(Event:) Double click event received.<br>' );
            $( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
            window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
        } // triple, quadruple, etc. clicks are ignored.

    });

});
</script>

Bản giới thiệu:

JSfiddle

Lưu ý về khả năng truy cập và tốc độ nhấp đúp:

• Như Wikipedia đặt nó "Độ trễ tối đa cần thiết cho hai lần nhấp chuột liên tiếp được hiểu là một lần nhấp đúp không được chuẩn hóa."
• Không có cách nào để phát hiện tốc độ nhấp đúp của hệ thống trong trình duyệt.
• Có vẻ mặc định là 500 ms và phạm vi 100-900mms trên Windows ( nguồn )
• Hãy nghĩ đến những người khuyết tật đặt tốc độ nhấp đúp trong cài đặt hệ điều hành của họ ở mức chậm nhất.
  • Nếu tốc độ nhấp đúp của hệ thống chậm hơn 500 ms mặc định của chúng tôi ở trên, thì cả hành vi nhấp một lần và nhấp đúp đều sẽ được kích hoạt.
  • Hoặc không sử dụng dựa vào kết hợp nhấp chuột đơn và nhấp đúp vào một và cùng một mục.
  • Hoặc: thêm cài đặt trong các tùy chọn để có khả năng tăng giá trị.

Phải mất một lúc để tìm ra giải pháp thỏa mãn, tôi hy vọng điều này sẽ hữu ích!

Sử dụng plugin jQuery Sparkle tuyệt vời. Plugin cung cấp cho bạn tùy chọn để phát hiện nhấp chuột đầu tiên và nhấp chuột cuối cùng. Bạn có thể sử dụng nó để phân biệt giữa nhấp chuột và dblclick bằng cách phát hiện xem liệu nhấp chuột khác có được theo sau bởi nhấp chuột đầu tiên hay không.

Kiểm tra nó tại http://balupton.com/sandbox/jquery-sparkle/demo/

Tôi đã viết một plugin jQuery đơn giản cho phép bạn sử dụng sự kiện 'singleclick' tùy chỉnh để phân biệt một lần nhấp chuột với một lần nhấp đúp:

https://github.com/omriyariv/jquery-singleclick

$('#someDiv').on('singleclick', function(e) {
    // The event will be fired with a small delay.
    console.log('This is certainly a single-click');
}

Câu trả lời đúng hiện đại là sự kết hợp giữa câu trả lời được chấp nhận và giải pháp của @kyw. Bạn cần một khoảng thời gian chờ để ngăn nhấp chuột đầu tiên đó và event.detailkiểm tra để ngăn nhấp chuột thứ hai.

const button = document.getElementById('button')
let timer
button.addEventListener('click', event => {
  if (event.detail === 1) {
    timer = setTimeout(() => {
      console.log('click')
    }, 200)
  }
})
button.addEventListener('dblclick', event => {
  clearTimeout(timer)
  console.log('dblclick')
})

<button id="button">Click me</button>

Tôi muốn tránh jquery (và 90-140k libs khác) và như các trình duyệt đã lưu ý xử lý onclick trước, vì vậy đây là những gì tôi đã làm trên trang web mà tôi đã tạo (ví dụ này cũng bao gồm việc lấy một vị trí được nhấp vào local xy)

clicksNow-0; //global js, owell

function notify2(e, right) {  // called from onclick= and oncontextmenu= (rc)
var x,y,xx,yy;
var ele = document.getElementById('wrap');  
    // offset fixed parent for local win x y
var xxx= ele.offsetLeft;
var yyy= ele.offsetTop;

//NScape
if (document.layers || document.getElementById&&!document.all) {
    xx= e.pageX;
    yy= e.pageY;
} else {
    xx= e.clientX;
    yy= e.clientY;
}
x=xx-xxx;
y=yy-yyy;

clicksNow++;
    // 200 (2/10ths a sec) is about a low as i seem to be able to go
setTimeout( "processClick( " + right + " , " + x + " , " + y + ")", 200);
}

function processClick(right, x, y) {
if (clicksNow==0) return; // already processed as dblclick
if (clicksNow==2) alert('dbl');
clicksNow=0;
    ... handle, etc ...
}

hy vọng điều đó sẽ giúp

Dựa trên câu trả lời của Adrien Schuler (cảm ơn bạn rất nhiều !!!) cho Datatables.net và cho nhiều mục đích sử dụng, đây là một sửa đổi:

Chức năng

/**
 * For handle click and single click in child's objects
 * @param {any} selector Parents selector, like 'tr'
 * @param {any} single_click_callback Callback for single click
 * @param {any} double_click_callback Callback for dblclick
 * @param {any} timeout Timeout, optional, 300 by default
 */
jQuery.fn.single_double_click = function (selector, single_click_callback, double_click_callback, timeout) {
    return this.each(function () {
        let clicks = 0;
        jQuery(this).on('click', selector, function (event) {
            let self = this;
            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);
            }
        });
    });
}

Sử dụng

$("#MyTableId").single_double_click('tr',
            function () {   //  Click
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("Click in "+id+" "+data);
            },
            function () {   //  DBLClick
                let row = MyTable.row(this);
                let id = row.id();
                let data = row.data();
                console.log("DBLClick in "+id+" "+data);
            }
        );

điều này đã làm việc cho tôi–

var clicked=0;
function chkBtnClcked(evnt) {
    clicked++;
    // wait to see if dblclick
    if (clicked===1) {
        setTimeout(function() {
            clicked=0;
            .
            .
        }, 300); // test for another click within 300ms
    }
    if (clicked===2) {
        stopTimer=setInterval(function() {
            clicked=0;
            .
            .
        }, 30*1000); // refresh every 30 seconds
    }
}

sử dụng-

<div id="cloneimages" style="position: fixed;" onclick="chkBtnClcked(evnt)"  title="Click for next pic; double-click for slide show"></div>

Chỉ đăng câu trả lời HTML gốc trong trường hợp cần thiết là dễ dàng và HTML.

<p ondblclick="myFunction()" id = 'id'>Double-click me</p>

Tất nhiên điều này có các tùy chọn Jquery gốc. tức là ... $('#id').attr('ondblclick',function(){...})hoặc, như đã nêu trước đây,$('#id').dblclick(function(){...});

Tôi biết điều này đã cũ, nhưng dưới đây là một ví dụ JS duy nhất về bộ đếm vòng lặp cơ bản với bộ đếm thời gian duy nhất để xác định một nhấp chuột đơn và nhấp đúp. Hy vọng rằng điều này sẽ giúp ai đó.

var count = 0;
var ele = document.getElementById("my_id");
ele.addEventListener('click', handleSingleDoubleClick, false); 

function handleSingleDoubleClick()
{
  if(!count) setTimeout(TimerFcn, 400); // 400 ms click delay
  count += 1;
}
function TimerFcn() 
{
  if(count > 1) console.log('you double clicked!')
  else console.log('you single clicked')
  count = 0;
}