ฉันจะจดจำเหตุการณ์การสัมผัสโดยใช้ jQuery ใน Safari สำหรับ iPad ได้อย่างไร เป็นไปได้ไหม?

เป็นไปได้หรือไม่ที่จะจดจำเหตุการณ์การสัมผัสบนเบราว์เซอร์ Safari ของ iPad โดยใช้ jQuery

ฉันใช้ mouseOver และ mouseOut events ในเว็บแอปพลิเคชัน มีเหตุการณ์ที่คล้ายกันสำหรับเบราว์เซอร์ Safari ของ iPad เนื่องจากไม่มีเหตุการณ์เช่น mouseOut และ mouseMove หรือไม่

Core jQuery ไม่มีอะไรพิเศษสำหรับกิจกรรมการสัมผัส แต่คุณสามารถสร้างของคุณเองได้อย่างง่ายดายโดยใช้กิจกรรมต่อไปนี้

• touchstart
• touchmove
• touchend
• touchcancel

ตัวอย่างเช่น touchmove

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    alert(touch.pageX + " - " + touch.pageY);
}, false);

ใช้งานได้กับเบราว์เซอร์ที่ใช้WebKitส่วนใหญ่(รวมถึง Android)

นี่คือบางส่วนเอกสารที่ดีคือ

หากคุณใช้ jQuery 1.7+ มันจะง่ายกว่าคำตอบอื่น ๆ ทั้งหมด

$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });

วิธีที่ง่ายที่สุดคือการใช้ห้องสมุด JavaScript multitouch เช่น Hammer.js จากนั้นคุณสามารถเขียนรหัสเช่น:

canvas
    .hammer({prevent_default: true})
    .bind('doubletap', function(e) { // And double click
        // Zoom-in
    })
    .bind('dragstart', function(e) { // And mousedown
        // Get ready to drag
    })
    .bind('drag', function(e) { // And mousemove when mousedown
        // Pan the image
    })
    .bind('dragend', function(e) { // And mouseup
        // Finish the drag
    });

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

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

$(document).on('touchstart', function() {
    detectTap = true; // Detects all touch events
});
$(document).on('touchmove', function() {
    detectTap = false; // Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") detectTap = true; // Detects click events
       if (detectTap){
          // Here you can write the function or codes you want to execute on tap

       }
 });

ฉันทดสอบและใช้งานได้ดีสำหรับฉันบน iPad และ iPhone มันตรวจจับการแตะและสามารถแยกความแตกต่างของการแตะและสัมผัสได้อย่างง่ายดาย

คุณสามารถใช้. on ()เพื่อจับภาพเหตุการณ์ต่าง ๆ และทดสอบการสัมผัสบนหน้าจอเช่น:

$('#selector')
.on('touchstart mousedown', function(e){
  e.preventDefault();
  var touch = e.touches[0];
  if(touch){
    // Do some stuff
  }
  else {
    // Do some other stuff
  }
});

jQuery Core ไม่มีอะไรพิเศษ แต่คุณสามารถอ่านได้ที่หน้าjQuery Mobile Eventsเกี่ยวกับกิจกรรมการสัมผัสที่แตกต่างกันซึ่งยังทำงานบนอุปกรณ์อื่นนอกเหนือจากอุปกรณ์ iOS เช่นกัน

พวกเขาเป็น:

• แตะเบา ๆ
• taphold
• งาบ
• ปัดไปทางซ้าย
• swiperight

โปรดสังเกตว่าในระหว่างการเลื่อนเหตุการณ์ (ขึ้นอยู่กับการสัมผัสบนอุปกรณ์มือถือ) อุปกรณ์ iOS จะหยุดการจัดการ DOM ขณะเลื่อน

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

<script>

function doTouch(e) {
    e.preventDefault();
    var touch = e.touches[0];

    document.getElementById("xtext").innerHTML = touch.pageX;
    document.getElementById("ytext").innerHTML = touch.pageY;   
}

document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);

</script>

X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>

ฉันเพิ่งทดสอบปลั๊กอิน GitHub jQuery Touch Events ของ benmajor สำหรับ jQueryทั้งรุ่น 1.4 และ 1.7+ มันมีน้ำหนักเบาและทำงานได้อย่างสมบูรณ์แบบทั้งกับonและbindในขณะที่ให้การสนับสนุนสำหรับกิจกรรมสัมผัสที่ครบถ้วนสมบูรณ์