วิธีการแยกเหตุการณ์คลิกเดียวและเหตุการณ์คลิกสองครั้ง?

ฉันมีเพียงปุ่มเดียวใน li มี "my_id"id ฉันแนบ jQuery สองเหตุการณ์ที่มีองค์ประกอบนี้

1

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

2

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

แต่ทุกครั้งมันก็ให้ single click

คุณต้องใช้การหมดเวลาเพื่อตรวจสอบว่ามีการคลิกอีกหรือไม่หลังจากคลิกครั้งแรก

นี่คือเคล็ดลับ :

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

การใช้งาน:

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

<button>Click Me!</button>

แก้ไข:

ตามที่ระบุไว้ด้านล่างต้องการใช้dblclickเหตุการณ์เนทีฟ: http://www.quirksmode.org/dom/events/click.html

หรือที่จัดทำโดย jQuery: http://api.jquery.com/dblclick/

พฤติกรรมของdblclickเหตุการณ์ที่จะมีการอธิบายที่quirksmode

ลำดับของเหตุการณ์สำหรับ a dblclickคือ:

1. mousedown
2. mouseup
3. คลิก
4. mousedown
5. mouseup
6. คลิก
7. DblClick

ข้อยกเว้นประการหนึ่งของกฎนี้คือ (แน่นอน) Internet Explorer ที่มีลำดับที่กำหนดเองคือ:

1. mousedown
2. mouseup
3. คลิก
4. mouseup
5. DblClick

อย่างที่คุณเห็นการฟังทั้งสองเหตุการณ์ร่วมกันในองค์ประกอบเดียวกันจะส่งผลให้มีการโทรไปยังclickตัวจัดการของคุณมากขึ้น

แทนที่จะใช้สถานะเฉพาะกิจและ setTimeout มากขึ้นกลับกลายเป็นว่ามีคุณสมบัติดั้งเดิมที่เรียกdetailว่าคุณสามารถเข้าถึงได้จากeventวัตถุ!

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

เบราว์เซอร์สมัยใหม่และแม้แต่ IE-9 ก็รองรับ :)

ที่มา: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

ฟังก์ชั่นง่ายๆ ไม่จำเป็นต้องใช้ jquery หรือกรอบงานอื่น ๆ ส่งผ่านฟังก์ชันของคุณเป็นพารามิเตอร์

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

ฉันกลัวว่าพฤติกรรมจะขึ้นอยู่กับเบราว์เซอร์:

ไม่สามารถเชื่อมโยงตัวจัดการกับทั้งเหตุการณ์คลิกและ dblclick สำหรับองค์ประกอบเดียวกันได้ ลำดับของเหตุการณ์ที่เรียกใช้จะแตกต่างกันไปในแต่ละเบราว์เซอร์โดยที่บางเหตุการณ์ได้รับสองเหตุการณ์คลิกก่อน dblclick และอื่น ๆ เพียงเหตุการณ์เดียว ความไวในการคลิกสองครั้ง (เวลาสูงสุดระหว่างการคลิกที่ตรวจพบว่าเป็นการดับเบิลคลิก) อาจแตกต่างกันไปตามระบบปฏิบัติการและเบราว์เซอร์และมักจะกำหนดค่าได้โดยผู้ใช้

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

การเรียกใช้รหัสของคุณใน Firefox การแจ้งเตือน () ในclick()ตัวจัดการจะป้องกันไม่ให้คุณคลิกเป็นครั้งที่สอง หากคุณลบการแจ้งเตือนดังกล่าวคุณจะได้รับทั้งสองเหตุการณ์

ในการดับเบิลคลิก (คลิกสองครั้ง) คุณต้องคลิกหนึ่งครั้งก่อน click()ไฟจัดการเมื่อมีการคลิกครั้งแรกของคุณและตั้งแต่การแจ้งเตือนปรากฏขึ้นให้คุณไม่ได้มีโอกาสที่จะทำให้คลิกครั้งที่สองที่จะยิงได้dblclick()จัดการ

เปลี่ยนตัวจัดการของคุณให้ทำอย่างอื่นที่ไม่ใช่alert()และคุณจะเห็นพฤติกรรม (อาจเปลี่ยนสีพื้นหลังขององค์ประกอบ):

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

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

คำตอบนี้ล้าสมัยเมื่อเวลาผ่านไปตรวจสอบโซลูชันของ @ kyw

ฉันสร้างโซลูชันที่ได้รับแรงบันดาลใจจากส่วนสำคัญที่โพสต์โดย @AdrienSchuler ใช้โซลูชันนี้เฉพาะเมื่อคุณต้องการเชื่อมโยงการคลิกเพียงครั้งเดียวและดับเบิลคลิกที่องค์ประกอบ มิฉะนั้นฉันขอแนะนำให้ใช้เจ้าของภาษาclickและdblclickผู้ฟัง

นี่คือความแตกต่าง:

• Vanillajs ไม่มีการอ้างอิง
• อย่ารอช้าในการsetTimeoutจัดการคลิกหรือตัวจัดการดับเบิลคลิก
• เมื่อดับเบิลคลิกจะทำให้ตัวจัดการคลิกเริ่มทำงานจากนั้นตัวจัดการดับเบิลคลิก

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

การใช้งาน:

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

ด้านล่างนี้คือการใช้งานใน jsfiddle ปุ่ม jQuery คือลักษณะการทำงานของคำตอบที่ยอมรับ

jsfiddle

อีกหนึ่งวิธีแก้ปัญหา Vanilla แบบง่ายๆตามคำตอบA1rPun (ดูซอของเขาสำหรับโซลูชัน jQuery และทั้งสองอย่างอยู่ในอันนี้ )

ดูเหมือนว่าจะไม่ทริกเกอร์ตัวจัดการคลิกครั้งเดียวเมื่อผู้ใช้คลิกสองครั้งตัวจัดการคลิกครั้งเดียวจำเป็นต้องถูกทริกเกอร์หลังจากล่าช้า ...

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

นี่เป็นอีกทางเลือกหนึ่งของรหัสของ jeum สำหรับเหตุการณ์ต่างๆโดยพลการ:

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

จำเป็นสำหรับแอปcytoscape.js

จะแยกความแตกต่างระหว่างการคลิกครั้งเดียวและการคลิกสองครั้งในองค์ประกอบเดียวและองค์ประกอบเดียวกันได้อย่างไร

หากคุณไม่จำเป็นต้องผสมคุณสามารถพึ่งพาclickและdblclickและแต่ละคนจะทำผลงานได้ดี

ปัญหาที่เกิดขึ้นเมื่อพยายามที่จะนำมาผสม: เหตุการณ์จริงจะเรียกเหตุการณ์เช่นกันdblclickclickดังนั้นคุณจึงจำเป็นต้องตรวจสอบว่ามีการคลิกเพียงครั้งเดียวคือ "สแตนด์อะโลน" คลิกเพียงครั้งเดียวหรือเป็นส่วนหนึ่งของการดับเบิลคลิก

นอกจากนี้: คุณไม่ควรใช้ทั้งสองclickและdblclickที่หนึ่งและองค์ประกอบเดียวกัน :

ไม่สามารถเชื่อมโยงตัวจัดการกับทั้งเหตุการณ์คลิกและ dblclick สำหรับองค์ประกอบเดียวกันได้ ลำดับของเหตุการณ์ที่เรียกใช้จะแตกต่างกันไปในแต่ละเบราว์เซอร์โดยที่บางเหตุการณ์ได้รับสองเหตุการณ์คลิกก่อน dblclick และอื่น ๆ เพียงเหตุการณ์เดียว ความไวในการคลิกสองครั้ง (เวลาสูงสุดระหว่างการคลิกที่ตรวจพบว่าเป็นการดับเบิลคลิก) อาจแตกต่างกันไปตามระบบปฏิบัติการและเบราว์เซอร์และมักจะกำหนดค่าได้โดยผู้ใช้
ที่มา: https://api.jquery.com/dblclick/

ตอนนี้ไปที่ข่าวดี:

คุณสามารถใช้detailคุณสมบัติของเหตุการณ์เพื่อตรวจหาจำนวนคลิกที่เกี่ยวข้องกับเหตุการณ์ ทำให้คลิกสองครั้งภายในclickตรวจจับค่อนข้างง่าย

ปัญหายังคงอยู่ที่การตรวจจับการคลิกเพียงครั้งเดียวและไม่ว่าจะเป็นส่วนหนึ่งของการคลิกสองครั้งหรือไม่ ด้วยเหตุนี้เราจึงกลับไปใช้ตัวจับเวลาและsetTimeoutเพื่อที่เราจะกลับไปใช้การจับเวลาและ

รวมทุกอย่างเข้าด้วยกันโดยใช้แอตทริบิวต์ข้อมูล (เพื่อหลีกเลี่ยงตัวแปรส่วนกลาง) และไม่จำเป็นต้องนับการคลิกด้วยตัวเองเราจะได้รับ:

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>

การสาธิต:

JSfiddle

หมายเหตุเกี่ยวกับการช่วยการเข้าถึงและความเร็วในการดับเบิลคลิก:

• ดังที่ Wikipedia ระบุไว้ว่า "ความล่าช้าสูงสุดที่จำเป็นสำหรับการคลิกสองครั้งติดต่อกันเพื่อตีความว่าเป็นการดับเบิลคลิกนั้นไม่ได้มาตรฐาน"
• ไม่มีวิธีตรวจจับความเร็วดับเบิลคลิกของระบบในเบราว์เซอร์
• ดูเหมือนว่าค่าเริ่มต้นคือ 500 ms และช่วง 100-900mms บน Windows (ที่มา )
• ลองนึกถึงคนพิการที่ตั้งค่าไว้ในการตั้งค่าระบบปฏิบัติการความเร็วในการดับเบิลคลิกจะช้าที่สุด
  • หากความเร็วในการดับเบิ้ลคลิกของระบบช้ากว่าค่าเริ่มต้น 500 มิลลิวินาทีข้างต้นทั้งพฤติกรรมการคลิกครั้งเดียวและสองครั้งจะถูกทริกเกอร์
  • อย่าใช้การพึ่งพาการคลิกครั้งเดียวและดับเบิลคลิกที่รวมกันและรายการเดียวกัน
  • หรือ: เพิ่มการตั้งค่าในตัวเลือกเพื่อให้สามารถเพิ่มค่าได้

ใช้เวลาสักครู่ในการค้นหาวิธีแก้ปัญหาที่น่าพอใจฉันหวังว่านี่จะช่วยได้!

ใช้ปลั๊กอิน jQuery Sparkle ที่ยอดเยี่ยม ปลั๊กอินช่วยให้คุณมีตัวเลือกในการตรวจจับคลิกแรกและคลิกสุดท้าย คุณสามารถใช้เพื่อแยกความแตกต่างระหว่างคลิกและ dblclick โดยการตรวจสอบว่าคลิกอื่นตามมาด้วยคลิกแรกหรือไม่

ตรวจสอบได้ที่http://balupton.com/sandbox/jquery-sparkle/demo/

ฉันเขียนปลั๊กอิน jQuery ง่ายๆที่ให้คุณใช้เหตุการณ์ 'singleclick' ที่กำหนดเองเพื่อแยกความแตกต่างของการคลิกเพียงครั้งเดียวจากการดับเบิลคลิก:

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

คำตอบที่ถูกต้องสมัยใหม่เป็นการผสมผสานระหว่างคำตอบที่ยอมรับและคำตอบของ @kyw คุณต้องหมดเวลาเพื่อป้องกันไม่ให้คลิกครั้งแรกและevent.detailตรวจสอบเพื่อป้องกันการคลิกครั้งที่สอง

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>

ฉันชอบที่จะหลีกเลี่ยง jquery (และ libs 90-140k อื่น ๆ ) และตามที่ระบุไว้เบราว์เซอร์จะจัดการ onclick ก่อนดังนั้นนี่คือสิ่งที่ฉันทำบนเว็บไซต์ที่ฉันสร้างขึ้น (ตัวอย่างนี้ยังครอบคลุมถึงการรับตำแหน่งที่คลิกในพื้นที่ 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 ...
}

หวังว่าจะช่วยได้

จากคำตอบของAdrien Schuler (ขอบคุณมาก !!!) สำหรับDatatables.netและสำหรับการใช้งานมากมายนี่คือการปรับเปลี่ยน:

ฟังก์ชัน

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

ใช้

$("#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);
            }
        );

สิ่งนี้ได้ผลสำหรับฉัน -

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

usage-

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

เพียงแค่โพสต์คำตอบ HTML ดั้งเดิมในกรณีที่ต้องการเป็นเรื่องง่ายและ HTML

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

หลักสูตรนี้มีตัวเลือก Jquery ดั้งเดิม เช่น ... $('#id').attr('ondblclick',function(){...})หรือตามที่ระบุไว้ก่อนหน้านี้$('#id').dblclick(function(){...});

ฉันรู้ว่านี่เป็นรุ่นเก่า แต่ด้านล่างนี้เป็นเพียงตัวอย่าง JS ของตัวนับลูปพื้นฐานที่มีตัวจับเวลาเพียงครั้งเดียวเพื่อพิจารณาการคลิกครั้งเดียวเทียบกับดับเบิลคลิก หวังว่านี่จะช่วยใครบางคนได้

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