ฉันทำงานบนเว็บไซต์มือถือที่ต้องทำงานกับอุปกรณ์ที่หลากหลาย คนที่ทำให้ฉันปวดหัวในขณะนี้คือ BlackBerry

เราจำเป็นต้องสนับสนุนการคลิกทั้งคีย์บอร์ดและกิจกรรมการสัมผัส

เป็นการดีที่ฉันจะใช้:

$thing.click(function(){...})

แต่ปัญหาที่เราพบคืออุปกรณ์ BlackBerry บางตัวมีความล่าช้าที่น่ารำคาญมากตั้งแต่ช่วงเวลาที่กดปุ่มเพื่อให้เกิดการคลิก

การรักษาคือการใช้ touchstart แทน:

$thing.bind('touchstart', function(event){...})

แต่ฉันจะไปผูกเหตุการณ์ทั้งสองอย่างไร แต่เพียงหนึ่งเหตุการณ์? ฉันยังต้องการกิจกรรมการคลิกสำหรับอุปกรณ์แป้นพิมพ์ แต่แน่นอนว่าไม่ต้องการให้เหตุการณ์การคลิกเริ่มทำงานหากฉันใช้อุปกรณ์ระบบสัมผัส

คำถามโบนัส: มีการทำเช่นนี้และรองรับเบราว์เซอร์เพิ่มเติมที่ไม่มีแม้แต่เหตุการณ์เริ่มต้นหรือไม่? ในการค้นคว้านี้ดูเหมือนว่า BlackBerry OS5 ไม่รองรับระบบเริ่มต้นดังนั้นจะต้องพึ่งพากิจกรรมการคลิกสำหรับเบราว์เซอร์นั้น

ภาคผนวก:

บางทีคำถามที่ครอบคลุมมากขึ้นคือ:

ด้วย jQuery เป็นไปได้ / แนะนำให้จัดการกับทั้งการโต้ตอบแบบสัมผัสและการโต้ตอบกับเมาส์ด้วยการโยงเดียวกันหรือไม่?

เป็นการดีที่คำตอบคือใช่ ถ้าไม่ฉันมีตัวเลือก:

1) เราใช้ WURFL เพื่อรับข้อมูลอุปกรณ์ดังนั้นสามารถสร้างเมทริกซ์ของอุปกรณ์ของเราเอง เราจะใช้ touchstart หรือคลิกทั้งนี้ขึ้นอยู่กับอุปกรณ์

2) ตรวจหาการรองรับการสัมผัสในเบราว์เซอร์ผ่าน JS (ฉันต้องทำวิจัยเพิ่มเติมเกี่ยวกับเรื่องนี้ แต่ดูเหมือนว่าเป็นไปได้)

อย่างไรก็ตามยังคงมีปัญหาหนึ่ง: สิ่งที่เกี่ยวกับอุปกรณ์ที่รองรับทั้งสอง โทรศัพท์บางรุ่นที่เรารองรับ (เช่น Nokias และ BlackBerries) มีทั้งหน้าจอสัมผัสและคีย์บอร์ด ดังนั้นการพาฉันกลับไปที่คำถามเดิม ... มีวิธีใดบ้างที่จะอนุญาตทั้งสองอย่างพร้อมกัน?

อัปเดต : ลองดูโครงการ jQuery Pointer Events Polyfillที่ให้คุณเชื่อมโยงกับ "pointer" ของเหตุการณ์แทนการเลือกระหว่างเมาส์และสัมผัส

ผูกกับทั้งคู่ แต่สร้างแฟล็กเพื่อให้ฟังก์ชันใช้ไฟเพียงครั้งเดียวต่อ 100ms หรือมากกว่านั้น

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});

นี่คือการแก้ไขที่ฉัน "สร้าง" และนำ GhostClick ออกมาและใช้ FastClick ลองด้วยตัวคุณเองและแจ้งให้เราทราบหากมันเหมาะกับคุณ

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});

คุณสามารถลองสิ่งนี้:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

โดยปกติแล้วจะใช้งานได้เช่นกัน:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});

เพียงเพิ่มreturn false;ในตอนท้ายของon("click touchstart")ฟังก์ชั่นเหตุการณ์สามารถแก้ปัญหานี้ได้

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

จากเอกสาร jQuery ใน. on ()

กลับfalseมาจากการจัดการเหตุการณ์จะเรียกโดยอัตโนมัติและevent.stopPropagation() คุ้มค่านอกจากนี้ยังสามารถผ่านไปจัดการตามที่จดชวเลขเป็นevent.preventDefault()falsefunction(){ return false; }

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

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

ในกรณีของฉันเหตุการณ์การคลิกถูกผูกไว้กับ<a>องค์ประกอบดังนั้นฉันจึงต้องลบการเชื่อมโยงการคลิกและเชื่อมโยงเหตุการณ์การคลิกใหม่ซึ่งป้องกันการกระทำเริ่มต้นสำหรับ<a>องค์ประกอบ

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});

ฉันประสบความสำเร็จด้วยวิธีต่อไปนี้

ง่าย Peasy ...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});

ฉันเชื่อว่าวิธีปฏิบัติที่ดีที่สุดคือตอนนี้ที่จะใช้:

$('#object').on('touchend mouseup', function () { });

touchend

เหตุการณ์ touchend จะถูกยิงเมื่อจุดสัมผัสถูกลบออกจากพื้นผิวสัมผัส

เหตุการณ์ touchend จะไม่เรียกใช้เหตุการณ์เมาส์ใด ๆ

---

mouseup

เหตุการณ์การเลื่อนเมาส์ถูกส่งไปยังองค์ประกอบเมื่อตัวชี้เมาส์อยู่เหนือองค์ประกอบและปุ่มเมาส์จะถูกปล่อยออกมา องค์ประกอบ HTML ใด ๆ สามารถรับเหตุการณ์นี้ได้

เหตุการณ์การคลิกเมาส์จะไม่เรียกใช้กิจกรรมการสัมผัสใด ๆ

ตัวอย่าง

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>

แก้ไข (2017)

ตั้งแต่ปี 2017 เบราว์เซอร์ที่เริ่มต้นด้วย Chrome และทำขั้นตอนเพื่อทำให้การคลิก.on("click")เข้ากันได้กับทั้งเมาส์และสัมผัสมากขึ้นโดยการขจัดความล่าช้าที่เกิดขึ้นจากการแตะที่กิจกรรมตามคำขอการคลิก

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

ฉันยังไม่ได้ทำการทดสอบข้ามเบราว์เซอร์เพื่อดูว่าสิ่งนี้ใช้ได้จริงหรือไม่

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

หากคุณเชื่อมต่อในเหตุการณ์ touchmove และติดตามตำแหน่งคุณสามารถเพิ่มรายการอื่น ๆ ในฟังก์ชั่น doTouchLogic เพื่อตรวจจับท่าทางและอะไรก็ตาม

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}

ตรวจสอบปุ่มที่รวดเร็วและคลิก chost จาก google https://developers.google.com/mobile/articles/fast_buttons

ดี ... สิ่งเหล่านี้ซับซ้อนมาก

หากคุณมีความทันสมัยมันเป็นเกมง่ายๆ

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});

การดำเนินการอื่นเพื่อการบำรุงรักษาที่ดีขึ้น อย่างไรก็ตามเทคนิคนี้จะทำ event.stopPropagation () การคลิกไม่ได้ถูกตรวจจับบนองค์ประกอบอื่นใดที่คลิกมาเป็นเวลา 100 มิลลิวินาที

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}

นี่เป็นสิ่งที่ฉันได้ทำเพื่อการคลิกเร็วที่สุด / ตอบสนองมากที่สุดบนเดสก์ท็อป / แตะบนโซลูชันมือถือที่ฉันนึกถึง:

ฉันแทนที่onฟังก์ชั่นของ jQuery ด้วยสิ่งที่ถูกแก้ไขซึ่งเมื่อใดก็ตามที่เบราว์เซอร์รองรับกิจกรรมการสัมผัสจะแทนที่เหตุการณ์การคลิกทั้งหมดของฉันด้วย touchstart

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

การใช้งานมากกว่าที่จะเป็นเหมือนเดิมเช่น:

$('#my-button').on('click', function(){ /* ... */ });

แต่มันจะใช้ระบบเริ่มต้นเมื่อมีให้คลิกเมื่อไม่ ไม่มีความล่าช้าใด ๆ ที่จำเป็น: D

ฉันเพิ่งคิดความคิดที่จะจดจำว่าontouchstartเคยถูกเรียก ในกรณีนี้เราอยู่ในอุปกรณ์ที่รองรับและต้องการเพิกเฉยต่อonclickเหตุการณ์ เนื่องจากontouchstartควรเรียกใช้มาก่อน onclickฉันจึงใช้สิ่งนี้:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>

คุณสามารถลองสิ่งนี้:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);

ในกรณีของฉันนี้ทำงานได้อย่างสมบูรณ์:

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

ปัญหาหลักคือเมื่อแทนที่การคลิกเมาส์ฉันลองด้วยการคลิกบนอุปกรณ์สัมผัสที่เปิดการคลิกและการสัมผัสในเวลาเดียวกันถ้าฉันใช้การคลิกปิดการทำงานบางอย่างไม่สามารถใช้งานได้บนอุปกรณ์มือถือ ปัญหาเกี่ยวกับการคลิกคือเหตุการณ์ทั่วโลกที่ทำให้เกิดเหตุการณ์ที่เหลือรวมถึง touchend

สิ่งนี้ใช้งานได้สำหรับฉันมือถือฟังทั้งสองอย่างเพื่อป้องกันเหตุการณ์หนึ่งซึ่งเป็นเหตุการณ์การสัมผัส เดสก์ท็อปเท่านั้นฟังเมาส์

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });

สำหรับฉันคำตอบที่ดีที่สุดที่ Mottie ให้มาฉันแค่พยายามทำโค้ดของเขาให้ใช้ซ้ำได้มากขึ้นดังนั้นนี่คือการบริจาคของฉัน:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});

ฉันกำลังทำงานกับแอพพลิเคชั่นบนเว็บสำหรับ Android / iPad และดูเหมือนว่าหากใช้ "touchmove" ก็เพียงพอที่จะ "ย้ายส่วนประกอบ" (ไม่จำเป็นต้องเริ่มต้นระบบสัมผัส) โดยการปิดการใช้งาน touchstart คุณสามารถใช้. คลิก (); จาก jQuery มันใช้งานได้จริงเพราะไม่แตะต้องจนเกินไป

ในที่สุดคุณสามารถ binb .live ("touchstart", function (e) {e.stopPropagation ();}); เพื่อขอให้เหตุการณ์ touchstart หยุดการแพร่กระจายห้องนั่งเล่นให้คลิก () เพื่อรับการกระตุ้น

มันใช้งานได้สำหรับฉัน

มีหลายสิ่งที่ต้องพิจารณาเมื่อพยายามแก้ไขปัญหานี้ โซลูชันส่วนใหญ่หยุดการเลื่อนหรือไม่จัดการเหตุการณ์การคลิกที่ถูกต้อง

สำหรับวิธีการแก้ปัญหาอย่างเต็มรูปแบบโปรดดูที่https://developers.google.com/mobile/articles/fast_buttons

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

มันอาจจะมีประสิทธิภาพในการกำหนดให้กับเหตุการณ์ที่เกิดขึ้น'touchstart mousedown'หรือเพื่อหลีกเลี่ยงการที่ไม่พึงประสงค์ผลข้างเคียงของการใช้'touchend mouseup'click

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

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

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

ทำไมไม่ใช้ jQuery Event API

http://learn.jquery.com/events/event-extensions/

ฉันใช้เหตุการณ์ง่าย ๆ นี้ด้วยความสำเร็จ มันสะอาดเนมสเปซและยืดหยุ่นเพียงพอที่จะปรับปรุง

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};

หากคุณใช้ jQuery สิ่งต่อไปนี้ใช้ได้ดีสำหรับฉัน:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

โซลูชันอื่น ๆ ก็ดี แต่ฉันผูกพันหลายเหตุการณ์ในลูปและต้องการฟังก์ชันการโทรด้วยตนเองเพื่อสร้างการปิดที่เหมาะสม นอกจากนี้ฉันไม่ต้องการปิดใช้งานการเชื่อมโยงเนื่องจากฉันต้องการให้สามารถเรียกใช้เมื่อคลิก / touchstart ครั้งต่อไป

อาจช่วยคนที่อยู่ในสถานการณ์ที่คล้ายคลึงกัน!

สำหรับคุณสมบัติที่เรียบง่ายเพียงจำสัมผัสหรือคลิกฉันใช้รหัสต่อไปนี้:

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

สิ่งนี้จะคืนค่า "สัมผัส" หากกำหนดเหตุการณ์เริ่มต้นและ "ไม่แตะ" ถ้าไม่ทำ อย่างที่ฉันบอกไปว่านี่เป็นวิธีการง่ายๆสำหรับการคลิก / แตะเหตุการณ์เพียงแค่นั้น

ฉันพยายามและมันก็ใช้งานได้ (แต่ฉันเท่านั้นบน Android / Phonegap ดังนั้น caveat emptor)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

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

ฉันมี TON ของตัวจัดการเหมือนหนึ่งสำหรับ '#keypad' ดังนั้นการมีฟังก์ชั่นง่าย ๆ ที่ช่วยให้ฉันจัดการกับปัญหาที่ไม่มีรหัสมากเกินไปคือสาเหตุที่ฉันไปทางนี้

พยายามที่จะใช้จากVirtual Mouse (vmouse) Bindings jQuery Mobileเป็นเหตุการณ์เสมือนโดยเฉพาะสำหรับกรณีของคุณ:

$thing.on('vclick', function(event){ ... });

http://api.jquerymobile.com/vclick/

รายการสนับสนุนเบราว์เซอร์: http://jquerymobile.com/browser-support/1.4/

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

ปลั๊กอิน jQuery: แตะหรือเมาส์

ฉันลงเอยด้วยการเขียนปลั๊กอิน jQuery ที่เรียกว่า " Touch Or Mouse " (897 bytes minified) ที่สามารถตรวจสอบว่ามีเหตุการณ์ที่ถูกเรียกใช้โดยหน้าจอสัมผัสหรือเมาส์ (โดยไม่ต้องทดสอบเพื่อรองรับการสัมผัส!) สิ่งนี้ทำให้การสนับสนุนทั้งหน้าจอสัมผัสและเมาส์ในเวลาเดียวกันและแยกกิจกรรมของพวกเขาอย่างสมบูรณ์

วิธีนี้ OP สามารถใช้touchstartหรือtouchendหาได้อย่างรวดเร็วตอบสนองต่อการสัมผัสและการคลิกclickสำหรับการคลิกเรียกเท่านั้นโดยเมาส์

สาธิต

ก่อนอื่นต้องทำคือ เหตุการณ์องค์ประกอบของแทร็กสัมผัสร่างกาย:

$(document.body).touchOrMouse('init');

เหตุการณ์เมาส์ของเราถูกผูกไว้กับองค์ประกอบในวิธีการเริ่มต้นและโดยการโทร$body.touchOrMouse('get', e)เราสามารถค้นหาว่าเหตุการณ์ถูกเรียกโดยหน้าจอสัมผัสหรือเมาส์

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

ดูปลั๊กอินที่ทำงานที่http://jsfiddle.net/lmeurs/uo4069nh

คำอธิบาย

1. ปลั๊กอินนี้จะต้องมีการเรียกเช่น องค์ประกอบของร่างกายที่จะติดตามtouchstartและtouchendกิจกรรมวิธีนี้touchendเหตุการณ์ไม่จำเป็นต้องถูกไล่ออกจากองค์ประกอบทริกเกอร์ (เช่นลิงก์หรือปุ่ม) ระหว่างเหตุการณ์การแตะสองครั้งปลั๊กอินนี้จะพิจารณาเหตุการณ์เมาส์ใด ๆ ที่จะเรียกใช้โดยการสัมผัส
2. เหตุการณ์เมาส์จะเริ่มทำงานหลังจากtouchendเมื่อเหตุการณ์เมาส์ถูกเริ่มทำงานภายในghostEventDelay(ตัวเลือก 1,000 มิลลิวินาทีตามค่าเริ่มต้น) หลังจากtouchendนั้นปลั๊กอินนี้จะพิจารณากิจกรรมเมาส์ที่จะเรียกใช้โดยการสัมผัส
3. เมื่อคลิกที่องค์ประกอบโดยใช้หน้าจอสัมผัสองค์ประกอบจะได้รับ:activeสถานะ mouseleaveเหตุการณ์ถูกยิงเฉพาะหลังจากที่สูญเสียองค์ประกอบของรัฐเช่นนี้โดย คลิกที่องค์ประกอบอื่น ตั้งแต่นี้อาจเป็นวินาที (หรือนาที!) หลังจากmouseenterเหตุการณ์ถูกไล่ออกปลั๊กอินนี้จะติดตามmouseenterเหตุการณ์สุดท้ายขององค์ประกอบ: หากmouseenterเหตุการณ์ล่าสุดถูกเรียกโดยการสัมผัสmouseleaveเหตุการณ์ต่อไปนี้จะถูกพิจารณาด้วยการสัมผัส

นี่เป็นวิธีง่ายๆในการทำ:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

โดยทั่วไปคุณบันทึกประเภทเหตุการณ์แรกที่ถูกเรียกไปยังคุณสมบัติ 'ทริกเกอร์' ในวัตถุข้อมูลของ jQuery ที่แนบมากับเอกสารรูทและดำเนินการเฉพาะเมื่อประเภทเหตุการณ์เท่ากับค่าใน 'ทริกเกอร์' บนอุปกรณ์แบบสัมผัสเชนเหตุการณ์น่าจะเป็น 'touchstart' ตามด้วย 'คลิก'; อย่างไรก็ตามตัวจัดการ 'คลิก' จะไม่ทำงานเนื่องจาก "คลิก" ไม่ตรงกับประเภทเหตุการณ์เริ่มต้นที่บันทึกไว้ใน 'ทริกเกอร์' ("touchstart")

สมมติฐานและฉันเชื่อว่าเป็นอุปกรณ์ที่ปลอดภัยนั่นคือสมาร์ทโฟนของคุณจะไม่เปลี่ยนจากอุปกรณ์สัมผัสเป็นอุปกรณ์เมาส์อย่างเป็นธรรมชาติมิฉะนั้นการแตะจะไม่เคยลงทะเบียนเพราะเหตุการณ์ประเภท 'ทริกเกอร์' จะบันทึกเพียงครั้งเดียวต่อ การโหลดหน้าเว็บและ "คลิก" จะไม่ตรงกับ "touchstart"

ต่อไปนี้เป็น codepen ที่คุณสามารถเล่นได้ด้วย (ลองแตะที่ปุ่มบนอุปกรณ์ระบบสัมผัส - ไม่ควรมีความล่าช้าในการคลิก): http://codepen.io/thdoan/pen/xVVrOZ

ฉันยังใช้สิ่งนี้เป็นปลั๊กอิน jQuery ง่าย ๆ ที่สนับสนุนการกรองลูกหลานของ jQuery โดยผ่านสตริงตัวเลือก:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

Codepen: http://codepen.io/thdoan/pen/GZrBdo/

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

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});