Mendeteksi perangkat layar sentuh dengan Javascript

Di Javascript / jQuery, bagaimana saya bisa mendeteksi jika perangkat klien memiliki mouse?

Saya punya situs yang menampilkan panel info kecil ketika pengguna mengarahkan mouse mereka ke suatu item. Saya menggunakan jQuery.hoverIntent untuk mendeteksi hover, tetapi ini jelas tidak bekerja pada perangkat layar sentuh seperti iPhone / iPad / Android. Jadi pada perangkat itu saya ingin kembali ketuk untuk menampilkan panel info.

+1 untuk melakukan hoverdan clickkeduanya. Salah satu cara lain bisa menggunakan kueri media CSS dan menggunakan beberapa gaya hanya untuk layar / perangkat seluler yang lebih kecil, yang mana yang paling mungkin memiliki fungsi sentuh / ketuk. Jadi, jika Anda memiliki beberapa gaya spesifik melalui CSS, dan dari jQuery Anda memeriksa elemen-elemen tersebut untuk properti gaya perangkat seluler yang dapat Anda kaitkan ke dalamnya untuk menulis kode khusus seluler Anda.

Lihat di sini: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Catatan : Hanya karena perangkat mendukung acara sentuh tidak berarti perangkat itu hanya perangkat layar sentuh. Banyak perangkat (seperti Asus Zenbook saya) mendukung acara klik dan sentuh, bahkan ketika mereka tidak memiliki mekanisme input sentuh yang sebenarnya. Saat merancang untuk dukungan sentuh, selalu sertakan dukungan acara klik dan jangan pernah menganggap perangkat apa pun secara eksklusif salah satunya.

Ditemukan pengujian untuk window.Touch tidak berfungsi di Android tetapi ini berfungsi:

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

Lihat artikel: Apa cara terbaik untuk mendeteksi perangkat 'layar sentuh' menggunakan JavaScript?

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

Alasan untuk menggunakan maxTouchPoints bersama dengan msMaxTouchPoints:

Microsoft telah menyatakan bahwa mulai dengan Internet Explorer 11, versi prefixed vendor Microsoft properti ini (msMaxTouchPoints) dapat dihapus dan merekomendasikan menggunakan maxTouchPoints sebagai gantinya.

Sumber: http://ctrlq.org/code/19616-detect-touch-screen-javascript

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

Bekerja di mana saja !!

Saya menggunakan:

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

di jQuery mobile 1.0.1

Google Chrome tampaknya mengembalikan hasil positif yang salah:

var isTouch = 'ontouchstart' in document.documentElement;

Saya kira itu ada hubungannya dengan kemampuannya untuk "meniru acara sentuh" ​​(F12 -> pengaturan di sudut kanan bawah -> "menimpa" tab -> kotak centang terakhir). Saya tahu ini dinonaktifkan secara default, tetapi itulah yang saya sambungkan dengan perubahan hasil (metode "dalam" yang digunakan untuk bekerja di Chrome). Namun, ini tampaknya berhasil, sejauh yang saya uji:

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

Semua browser saya sudah menjalankan kode itu pada status typeof adalah "objek" tapi saya merasa lebih yakin mengetahui bahwa itu adalah apa pun kecuali yang tidak terdefinisi :-)

Diuji pada IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome untuk iPad 21.0.1180.80 dan iPad Safari. Akan lebih keren jika seseorang melakukan beberapa tes lagi dan membagikan hasilnya.

Tulis ini untuk salah satu situs saya dan mungkin merupakan solusi paling mudah. Terutama karena bahkan Modernizr bisa mendapatkan hasil positif palsu pada deteksi sentuhan.

Jika Anda menggunakan jQuery

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

atau hanya JS murni ...

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

Untuk posting / komentar pertama saya: Kita semua tahu bahwa 'touchstart' dipicu sebelum klik. Kita juga tahu bahwa ketika pengguna membuka halaman Anda ia akan: 1) menggerakkan mouse 2) klik 3) sentuh layar (untuk menggulir, atau ... :))

Mari kita coba sesuatu:

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

// <- Akhir: jQuery

Semoga harimu menyenangkan!

Saya telah menguji kode berikut yang disebutkan di atas dalam diskusi

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

bekerja di android Mozilla, chrome, Opera, browser default android dan safari di iphone ... semua positif ...

tampaknya solid untukku :)

Posting blog bermanfaat tentang subjek, yang ditautkan dari dalam sumber Modernizr untuk mendeteksi acara sentuh. Kesimpulan: Tidak mungkin mendeteksi perangkat layar sentuh dengan andal dari Javascript.

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

Ini bekerja untuk saya:

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

Jika Anda menggunakan Modernizr , sangat mudah digunakan Modernizr.touchseperti yang disebutkan sebelumnya.

Namun, saya lebih suka menggunakan kombinasi Modernizr.touchdan pengujian agen pengguna, hanya agar aman.

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
    }

Jika Anda tidak menggunakan Modernizr, Anda cukup mengganti Modernizr.touchfungsi di atas dengan('ontouchstart' in document.documentElement)

Perhatikan juga bahwa pengujian agen pengguna iemobileakan memberi Anda jangkauan yang lebih luas dari perangkat seluler Microsoft yang terdeteksi Windows Phone.

Lihat juga pertanyaan SO ini

Di jQuery Mobile, Anda cukup melakukan:

$.support.touch

Tidak tahu mengapa ini sangat tidak berdokumen .. tetapi crossbrowser aman (2 versi terbaru dari browser saat ini).

Seperti yang telah disebutkan, perangkat dapat mendukung input mouse dan sentuh. Sangat sering, pertanyaannya bukan "apa yang didukung" tetapi "apa yang saat ini digunakan".

Untuk kasus ini, Anda cukup mendaftarkan acara mouse (termasuk pendengar melayang) dan menyentuh acara yang sama.

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

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

...

JavaScript harus secara otomatis memanggil pendengar yang benar berdasarkan input pengguna. Jadi, dalam hal acara sentuhan,onTouchStartCallback akan dipecat, meniru kode hover Anda.

Perhatikan bahwa sentuhan dapat memunculkan kedua jenis pendengar, sentuhan dan mouse. Namun, pendengar sentuh masuk terlebih dahulu dan dapat mencegah pendengar mouse berikutnya menembak dengan memanggil event.preventDefault().

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

Bacaan lebih lanjut di sini .

Untuk pengembangan iPad saya menggunakan:

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

Saya kemudian dapat secara selektif mengikat acara berbasis sentuhan (misalnya ontouchstart) atau acara berbasis mouse (misalnya onmousedown). Saya belum diuji di Android.