การตรวจจับอุปกรณ์หน้าจอสัมผัสด้วย Javascript

ใน Javascript / jQuery ฉันจะตรวจสอบได้อย่างไรว่าอุปกรณ์ไคลเอนต์มีเมาส์?

ฉันมีไซต์ที่เลื่อนแผงข้อมูลเล็ก ๆ น้อย ๆ เมื่อผู้ใช้วางเมาส์เหนือรายการ ฉันใช้ jQuery.hoverIntent เพื่อตรวจจับโฮเวอร์ แต่เห็นได้ชัดว่าสิ่งนี้ใช้ไม่ได้กับอุปกรณ์หน้าจอสัมผัสเช่น iPhone / iPad / Android ในอุปกรณ์เหล่านั้นฉันต้องการเปลี่ยนกลับเพื่อแตะเพื่อแสดงแผงข้อมูล

+1 สำหรับการทำhoverและclickทั้งสองอย่าง อีกวิธีหนึ่งอาจใช้การสืบค้นสื่อ CSS และใช้สไตล์บางอย่างสำหรับหน้าจอขนาดเล็ก / อุปกรณ์มือถือเท่านั้นซึ่งเป็นลักษณะที่มีแนวโน้มที่จะมีฟังก์ชันการสัมผัส / แตะมากที่สุด ดังนั้นหากคุณมีสไตล์เฉพาะบางอย่างผ่าน CSS และจาก jQuery คุณตรวจสอบองค์ประกอบเหล่านั้นเพื่อหาคุณสมบัติสไตล์อุปกรณ์มือถือคุณสามารถเชื่อมต่อกับพวกเขาเพื่อเขียนโค้ดเฉพาะมือถือให้คุณได้

ดูที่นี่: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

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

พบการทดสอบสำหรับหน้าต่าง Touch ไม่ทำงานบน Android แต่สิ่งนี้ทำ:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

ดูบทความ: วิธีใดที่ดีที่สุดในการตรวจจับอุปกรณ์ "หน้าจอสัมผัส" โดยใช้ JavaScript

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

เหตุผลในการใช้ maxTouchPoints ร่วมกับ msMaxTouchPoints:

Microsoft ได้แจ้งว่าตั้งแต่ Internet Explorer 11 เป็นต้นไปคุณสมบัตินี้ (msMaxTouchPoints) ซึ่งเป็นเวอร์ชันที่นำหน้าผู้จำหน่ายของ Microsoft อาจถูกลบออกและแนะนำให้ใช้ maxTouchPoints แทน

ที่มา: http://ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

ใช้ได้ทุกที่ !!

ฉันใช้:

if(jQuery.support.touch){
    alert('Touch enabled');
}

ใน jQuery mobile 1.0.1

Google Chrome ดูเหมือนจะส่งคืนผลบวกที่ผิดพลาดในสิ่งนี้:

var isTouch = 'ontouchstart' in document.documentElement;

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

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

เบราว์เซอร์ทั้งหมดที่ฉันเรียกใช้รหัสนั้นในสถานะtypeofคือ "object" แต่ฉันรู้สึกมั่นใจมากขึ้นเมื่อรู้ว่ามันคืออะไรก็ตาม แต่ไม่ได้กำหนด :-)

ทดสอบบน IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome สำหรับ iPad 21.0.1180.80 และ iPad Safari คงจะดีไม่น้อยถ้ามีคนทำแบบทดสอบเพิ่มเติมและแบ่งปันผลลัพธ์

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

หากคุณใช้ jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

หรือแค่ JS ล้วนๆ ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

สำหรับโพสต์ / ความคิดเห็นแรกของฉัน: เราทุกคนรู้ดีว่ามีการเรียกใช้ "touchstart" ก่อนคลิก เรารู้ด้วยว่าเมื่อผู้ใช้เปิดเพจของคุณเขาจะ: 1) เลื่อนเมาส์ 2) คลิก 3) แตะหน้าจอ (สำหรับการเลื่อนหรือ ... :))

ลองทำอะไร:

// -> เริ่ม: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- จบ: jQuery

ขอให้มีความสุขในวันนี้!

ฉันได้ทดสอบรหัสต่อไปนี้ที่กล่าวถึงข้างต้นในการสนทนา

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

ทำงานบน Android Mozilla, chrome, Opera, เบราว์เซอร์เริ่มต้นของ Android และซาฟารีบน iPhone ...

ดูเหมือนจะมั่นคงสำหรับฉัน :)

บล็อกโพสต์ที่เป็นประโยชน์ในหัวข้อนี้ซึ่งเชื่อมโยงจากแหล่งที่มา Modernizr เพื่อตรวจจับเหตุการณ์การสัมผัส สรุป: ไม่สามารถตรวจจับอุปกรณ์หน้าจอสัมผัสจาก Javascript ได้อย่างน่าเชื่อถือ

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

สิ่งนี้ใช้ได้กับฉัน:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

หากคุณใช้Modernizrจะใช้งานง่ายมากModernizr.touchดังที่กล่าวไว้ก่อนหน้านี้

อย่างไรก็ตามฉันชอบใช้Modernizr.touchการทดสอบตัวแทนผู้ใช้ร่วมกันเพื่อความปลอดภัย

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

หากคุณไม่ได้ใช้ Modernizr คุณสามารถแทนที่Modernizr.touchฟังก์ชันด้านบนด้วย('ontouchstart' in document.documentElement)

นอกจากนี้ทราบว่าการทดสอบตัวแทนของผู้ใช้จะให้ช่วงกว้างของการตรวจพบโทรศัพท์มือถือของไมโครซอฟท์กว่าiemobileWindows Phone

ดูคำถาม SO นี้ด้วย

ใน jQuery Mobile คุณสามารถทำได้:

$.support.touch

ไม่รู้ว่าทำไมถึงเป็นแบบนี้ .. แต่ปลอดภัยจาก crossbrowser (เบราว์เซอร์ปัจจุบัน 2 เวอร์ชันล่าสุด)

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

สำหรับกรณีนี้คุณสามารถลงทะเบียนเหตุการณ์ของเมาส์ (รวมถึงตัวฟังโฮเวอร์) และสัมผัสเหตุการณ์เหมือนกันได้

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript ควรเรียก Listener ที่ถูกต้องโดยอัตโนมัติตามข้อมูลที่ผู้ใช้ป้อน ดังนั้นในกรณีของการสัมผัสonTouchStartCallbackจะถูกยิงเลียนแบบรหัสโฮเวอร์ของคุณ

โปรดทราบว่าการสัมผัสอาจทำให้ผู้ฟังทั้งสองประเภทสัมผัสและเมาส์ event.preventDefault()แต่ผู้ฟังสัมผัสไปครั้งแรกและสามารถป้องกันไม่ให้ผู้ฟังเมาส์ที่ตามมาจากการยิงโดยโทร

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

อ่านเพิ่มเติมที่นี่

สำหรับการพัฒนา iPad ฉันใช้:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

จากนั้นฉันสามารถเลือกที่จะเชื่อมโยงกับเหตุการณ์ที่ใช้การสัมผัส (เช่น ontouchstart) หรือเหตุการณ์ที่ใช้เมาส์ (เช่น onmousedown) ฉันยังไม่ได้ทดสอบบน Android