Mendeteksi bahwa browser tidak memiliki mouse dan hanya sentuh

Saya sedang mengembangkan aplikasi web (bukan situs web dengan halaman teks yang menarik) dengan antarmuka yang sangat berbeda untuk disentuh (jari Anda menyembunyikan layar saat Anda mengklik) dan mouse (sangat bergantung pada pratinjau kursor). Bagaimana saya bisa mendeteksi bahwa pengguna saya tidak memiliki mouse untuk menyajikan antarmuka yang tepat kepadanya? Saya berencana untuk meninggalkan saklar untuk orang-orang dengan mouse dan sentuhan (seperti beberapa notebook).

Kemampuan acara sentuh di browser sebenarnya tidak berarti pengguna menggunakan perangkat sentuh (misalnya, Modernizr tidak memotongnya). Kode yang menjawab pertanyaan dengan benar harus kembali salah jika perangkat memiliki mouse, benar sebaliknya. Untuk perangkat dengan mouse dan sentuhan, itu harus mengembalikan false (tidak hanya menyentuh)

Sebagai catatan, antarmuka sentuh saya mungkin juga cocok untuk perangkat yang hanya menggunakan keyboard, jadi lebih kekurangan mouse yang ingin saya deteksi.

Agar lebih jelas, berikut adalah API yang ingin saya terapkan:

// Level 1


// The current answers provide a way to do that.
hasTouch();

// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();

// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)

// callback is called when the result of "hasTouch()" changes.
listenHasTouchChanges(callback);

// callback is called when the result of "hasMouse()" changes.
listenHasMouseChanges(callback);

Masalah utama adalah bahwa Anda memiliki kelas berbeda dari perangkat / kasus penggunaan:

1. Mouse dan keyboad (desktop)
2. Hanya menyentuh (ponsel / tablet)
3. Mouse, keyboard, dan sentuhan (sentuh laptop)
4. Sentuh dan keyboard (keyboard bluetooth pada tablet)
5. Hanya mouse (Pengguna yang dinonaktifkan / preferensi penelusuran)
6. Hanya keyboard (Pengguna yang dinonaktifkan / preferensi penelusuran)
7. Sentuh dan tetikus (mis., Arahkan acara dari pena Galaxy Note 2)

Yang lebih buruk, adalah bahwa seseorang dapat bertransisi dari beberapa kelas ini ke kelas lain (colok mouse, menyambungkan ke keyboard), atau pengguna mungkin TAMPAK berada di laptop biasa sampai mereka menjangkau dan menyentuh layar.

Anda benar dalam menganggap bahwa kehadiran konstruktor acara di browser bukanlah cara yang baik untuk bergerak maju (dan itu agak tidak konsisten). Selain itu, kecuali jika Anda melacak peristiwa yang sangat spesifik atau hanya mencoba untuk mengesampingkan beberapa kelas di atas, menggunakan acara itu sendiri bukanlah bukti penuh.

Misalnya, Anda telah menemukan bahwa pengguna telah mengeluarkan mouse nyata (bukan yang palsu dari acara sentuh, lihat http://www.html5rocks.com/en/mobile/touchandmouse/ ).

Lalu apa?

Anda mengaktifkan gaya melayang? Anda menambahkan lebih banyak tombol?

Apa pun cara Anda meningkatkan waktu untuk kaca karena Anda harus menunggu acara untuk menembak.

Tetapi kemudian apa yang terjadi ketika pengguna mulia Anda memutuskan ingin mencabut mouse-nya dan melakukan sentuhan penuh .. apakah Anda menunggu dia menyentuh antarmuka Anda yang sekarang penuh sesak, lalu mengubahnya tepat setelah dia berupaya untuk menunjukkan UI Anda yang sekarang penuh sesak?

Dalam bentuk bullet, mengutip stucox di https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101

• Kami ingin mendeteksi keberadaan mouse
• Ae mungkin tidak dapat mendeteksi sebelum suatu peristiwa dipecat
• Dengan demikian, yang kami deteksi adalah jika mouse telah digunakan dalam sesi ini - tidak akan langsung dari pemuatan halaman
• Kami mungkin juga tidak dapat mendeteksi bahwa tidak ada mouse - itu tidak akan ditentukan hingga benar (saya pikir ini lebih masuk akal daripada menetapkannya salah sampai terbukti)
• Dan kami mungkin tidak dapat mendeteksi jika mouse terputus di tengah sesi - yang tidak dapat dibedakan dari pengguna yang menyerah dengan mouse mereka

Selain itu: browser TIDAK tahu kapan pengguna menghubungkan mouse / terhubung ke keyboard, tetapi tidak mengeksposnya ke JavaScript .. sial!

Ini akan mengarahkan Anda ke yang berikut:

Melacak kemampuan saat ini dari pengguna yang diberikan adalah kompleks, tidak dapat diandalkan, dan patut diragukan

Namun, gagasan peningkatan progresif cukup baik diterapkan di sini. Bangun pengalaman yang bekerja dengan lancar tidak peduli konteks pengguna. Kemudian buat asumsi berdasarkan fitur peramban / kueri media untuk menambahkan fungsionalitas yang relatif dalam konteks yang diasumsikan. Kehadiran mouse hanyalah salah satu dari banyak cara di mana pengguna yang berbeda pada perangkat yang berbeda mengalami situs web Anda. Buat sesuatu dengan pantas di kernelnya dan jangan terlalu khawatir tentang bagaimana orang mengklik tombol.

Bagaimana kalau mendengarkan acara ibu jari di dokumen. Kemudian sampai Anda mendengar peristiwa itu, Anda menganggap bahwa perangkat itu hanya menyentuh atau keyboard.

var mouseDetected = false;
function onMouseMove(e) {
  unlisten('mousemove', onMouseMove, false);
  mouseDetected = true;
  // initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);

(Di mana listendan unlistenmendelegasikan ke addEventListeneratau yang attachEventsesuai.)

Mudah-mudahan ini tidak akan menyebabkan jank visual terlalu banyak, itu akan menyedot jika Anda membutuhkan tata letak ulang besar-besaran berdasarkan mode ...

Pada 2018 ada cara yang baik dan dapat diandalkan untuk mendeteksi apakah browser memiliki mouse (atau perangkat input serupa): fitur interaksi media CSS4 yang sekarang didukung oleh hampir semua browser modern (kecuali IE 11 dan browser ponsel khusus).

W3C:

Fitur media penunjuk digunakan untuk menanyakan keberadaan dan keakuratan perangkat penunjuk seperti mouse.

Lihat opsi berikut:

    /* The primary input mechanism of the device includes a 
pointing device of limited accuracy. */
    @media (pointer: coarse) { ... }

    /* The primary input mechanism of the device 
includes an accurate pointing device. */
    @media (pointer: fine) { ... }

    /* The primary input mechanism of the 
device does not include a pointing device. */
    @media (pointer: none) { ... }

    /* Primary input mechanism system can 
       hover over elements with ease */
    @media (hover: hover) { ... }

    /* Primary input mechanism cannot hover 
       at all or cannot conveniently hover 
       (e.g., many mobile devices emulate hovering
       when the user performs an inconvenient long tap), 
       or there is no primary pointing input mechanism */
    @media (hover: none) { ... }

    /* One or more available input mechanism(s) 
       can hover over elements with ease */
    @media (any-hover: hover) { ... }


    /* One or more available input mechanism(s) cannot 
       hover (or there are no pointing input mechanisms) */
    @media (any-hover: none) { ... }

Kueri media juga bisa digunakan di JS:

if(window.matchMedia("(any-hover: none)").matches) {
    // do sth
}

Terkait:

Dokumentasi W3: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

Dukungan browser: https://caniuse.com/#search=media%20features

Masalah serupa: Mendeteksi jika perangkat klien mendukung: hover dan: status fokus

@ Wyatt jawabannya bagus dan memberi kami banyak hal untuk dipikirkan.

Dalam kasus saya, saya memilih untuk mendengarkan interaksi pertama, hanya kemudian menetapkan perilaku. Jadi, bahkan jika pengguna memiliki mouse, saya akan memperlakukan sebagai perangkat sentuh jika interaksi pertama adalah sentuhan.

Mempertimbangkan urutan yang diberikan di mana acara diproses :

1. touchstart
2. sentuh
3. touchend
4. mouseover
5. mousemove
6. mousedown
7. mouseup
8. klik

Kita dapat berasumsi bahwa jika acara mouse dipicu sebelum disentuh, ini adalah peristiwa mouse sungguhan, bukan yang ditiru. Contoh (menggunakan jQuery):

$(document).ready(function() {
    var $body = $('body');
    var detectMouse = function(e){
        if (e.type === 'mousedown') {
            alert('Mouse interaction!');
        }
        else if (e.type === 'touchstart') {
            alert('Touch interaction!');
        }
        // remove event bindings, so it only runs once
        $body.off('mousedown touchstart', detectMouse);
    }
    // attach both events to body
    $body.on('mousedown touchstart', detectMouse);
});

Itu berhasil bagi saya

Ini hanya mungkin untuk mendeteksi jika browser mampu menyentuh . Tidak ada cara untuk mengetahui apakah itu benar-benar memiliki layar sentuh atau mouse yang terhubung.

Orang dapat memprioritaskan penggunaannya dengan mendengarkan acara sentuh alih-alih acara mouse jika kemampuan sentuh terdeteksi.

Untuk mendeteksi kemampuan lintas-browser:

function hasTouch() {
    return (('ontouchstart' in window) ||       // html5 browsers
            (navigator.maxTouchPoints > 0) ||   // future IE
            (navigator.msMaxTouchPoints > 0));  // current IE10
}

Maka orang dapat menggunakan ini untuk memeriksa:

if (!hasTouch()) alert('Sorry, need touch!);

atau untuk memilih acara mana yang ingin didengarkan, baik:

var eventName = hasTouch() ? 'touchend' : 'click';
someElement.addEventListener(eventName , handlerFunction, false);

atau gunakan pendekatan terpisah untuk sentuhan vs non-sentuhan:

if (hasTouch() === true) {
    someElement.addEventListener('touchend' , touchHandler, false);

} else {
    someElement.addEventListener('click' , mouseHandler, false);

}
function touchHandler(e) {
    /// stop event somehow
    e.stopPropagation();
    e.preventDefault();
    window.event.cancelBubble = true;
    // ...
    return false; // :-)
}
function mouseHandler(e) {
    // sorry, touch only - or - do something useful and non-restrictive for user
}

Untuk mouse, seseorang hanya dapat mendeteksi jika mouse sedang digunakan, tidak apakah itu ada atau tidak. Seseorang dapat mengatur bendera global untuk menunjukkan bahwa mouse terdeteksi oleh penggunaan (mirip dengan jawaban yang ada, tetapi sedikit disederhanakan):

var hasMouse = false;

window.onmousemove = function() {
    hasMouse = true;
}

(orang tidak dapat memasukkan mouseupatau mousedownkarena acara ini juga dapat dipicu oleh sentuhan)

Browser membatasi akses ke API sistem tingkat rendah yang diperlukan untuk dapat mendeteksi fitur-fitur seperti kemampuan perangkat keras dari sistem yang digunakan.

Ada kemungkinan untuk mungkin menulis plugin / ekstensi untuk mengaksesnya tetapi melalui JavaScript dan DOM deteksi semacam itu terbatas untuk tujuan ini dan orang harus menulis sebuah plugin khusus untuk berbagai platform OS.

Jadi kesimpulannya: deteksi seperti itu hanya dapat diperkirakan dengan "tebakan yang baik".

Ketika Media Query Level 4 tersedia di browser, kita akan dapat menggunakan kueri "pointer" dan "hover" untuk mendeteksi perangkat dengan mouse.

Jika kami benar-benar ingin mengomunikasikan informasi itu ke Javascript, kami dapat menggunakan kueri CSS untuk mengatur gaya tertentu sesuai dengan jenis perangkat, dan kemudian menggunakan getComputedStyledalam Javascript untuk membaca gaya itu, dan menurunkan jenis perangkat asli darinya.

Tetapi mouse dapat dihubungkan atau dicabut kapan saja, dan pengguna mungkin ingin beralih antara sentuhan dan mouse. Jadi kita mungkin perlu mendeteksi perubahan ini, dan menawarkan untuk mengubah antarmuka atau melakukannya secara otomatis.

Karena Anda berencana menawarkan cara untuk beralih antar antarmuka, apakah mungkin meminta pengguna untuk mengklik tautan atau tombol untuk "memasukkan" versi aplikasi yang benar? Kemudian Anda dapat mengingat preferensi mereka untuk kunjungan di masa mendatang. Ini bukan teknologi tinggi, tetapi 100% dapat diandalkan :-)

@SamuelRossille Tidak ada peramban yang saya sadari mengekspos keberadaan (atau ketiadaan) mouse, sayangnya.

Jadi, dengan itu dikatakan, kita hanya harus mencoba dan melakukan yang terbaik yang kita bisa dengan pilihan kita yang ada ... acara. Saya tahu itu bukan apa yang Anda cari ... setuju itu saat ini jauh dari ideal.

Kita dapat melakukan yang terbaik untuk mengetahui apakah pengguna menggunakan mouse atau sentuhan pada saat tertentu. Berikut ini adalah contoh cepat dan kotor menggunakan jQuery & Knockout:

//namespace
window.ns = {};

// for starters, we'll briefly assume if touch exists, they are using it - default behavior
ns.usingTouch = ko.observable(Modernizr.touch); //using Modernizr here for brevity.  Substitute any touch detection method you desire

// now, let's sort out the mouse
ns.usingMouse = ko.computed(function () {
    //touch
    if (ns.usingTouch()) {
        //first, kill the base mousemove event
        //I really wish browsers would stop trying to handle this within touch events in the first place
        window.document.body.addEventListener('mousemove', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }, true);

        //remove mouse class from body
        $('body').removeClass("mouse");

        //switch off touch listener
        $(document).off(".ns-touch");

        // switch on a mouse listener
        $(document).on('mousemove.ns-mouse', function (e) {
            if (Math.abs(window.lastX - e.clientX) > 0 || window.lastY !== e.clientY) {
                ns.usingTouch(false);  //this will trigger re-evaluation of ns.usingMouse() and result in ns.usingMouse() === true
            }
        });

        return false;
    }
    //mouse
    else {
        //add mouse class to body for styling
        $('body').addClass("mouse");

        //switch off mouse listener
        $(document).off(".ns-mouse");

        //switch on a touch listener
        $(document).on('touchstart.ns-touch', function () { ns.usingTouch(true) });

        return true;
    }
});

//tests:
//ns.usingMouse()
//$('body').hasClass('mouse');

Sekarang Anda dapat mengikat / berlangganan menggunakanMouse () & usingTouch () dan / atau gaya antarmuka Anda dengan kelas body.mouse . Antarmuka akan beralih bolak-balik segera setelah kursor mouse terdeteksi dan di layar sentuh.

Mudah-mudahan kita akan memiliki beberapa opsi yang lebih baik dari vendor browser segera.

Tera-WURFL dapat memberi tahu Anda kemampuan perangkat yang mengunjungi situs Anda dengan membandingkan tanda tangan browser dengan basis datanya. Coba lihat, gratis!

Mengapa Anda tidak mendeteksi jika memiliki kemampuan untuk merasakan sentuhan dan / atau bereaksi terhadap gerakan mouse?

// This will also return false on
// touch-enabled browsers like Chrome
function has_touch() {
  return !!('ontouchstart' in window);
}

function has_mouse() {
  return !!('onmousemove' in window);
}

Ini bekerja untuk saya dalam situasi yang sama. Pada dasarnya, anggap pengguna tidak memiliki mouse sampai Anda melihat serangkaian singkat mousemoves berturut-turut, tanpa campur tangan mousedowns atau mouseups. Tidak terlalu elegan, tetapi berhasil.

var mousedown = false;
var mousemovecount = 0;
function onMouseDown(e){
    mousemovecount = 0;
    mousedown = true;
}
function onMouseUp(e){
    mousedown = false;
    mousemovecount = 0;
}
function onMouseMove(e) {
    if(!mousedown) {
        mousemovecount++;
        if(mousemovecount > 5){
            window.removeEventListener('mousemove', onMouseMove, false);
            console.log("mouse moved");
            $('body').addClass('has-mouse');
        }
    } else {
        mousemovecount = 0;
    }
}
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);

Lihat di modenizr salah satu fiturnya adalah touch

http://modernizr.com/docs/#features-misc

Meskipun saya belum diuji sepenuhnya sepertinya berfungsi dengan sangat baik

Juga ini ditautkan dari halaman modernizr http://www.html5rocks.com/en/mobile/touchandmouse/

Seperti yang telah ditunjukkan oleh orang lain, secara definitif mendeteksi apakah mereka memiliki mouse atau tidak dapat diandalkan. Ini dapat dengan mudah berubah, tergantung pada perangkat. Ini jelas sesuatu yang tidak dapat Anda lakukan dengan andal dengan boolean benar atau salah, setidaknya pada skala dokumen.

Acara sentuh dan acara mouse adalah eksklusif. Jadi ini dapat sedikit membantu dalam mengambil tindakan yang berbeda. Masalahnya adalah acara sentuh lebih dekat dengan mouse atas / bawah / memindahkan acara, dan juga memicu acara klik.

Dari pertanyaan Anda, Anda mengatakan ingin memiliki pratinjau melayang. Selain itu, saya tidak tahu secara spesifik tentang antarmuka Anda. Saya berasumsi bahwa dengan kekurangan mouse Anda ingin mengetuk pratinjau, sementara klik melakukan tindakan yang berbeda karena pratinjau hover.

Jika itu masalahnya, Anda bisa menggunakan pendekatan yang agak malas untuk deteksi:

Acara onclick akan selalu didahului oleh acara onmouseover dengan mouse. Jadi catat bahwa mouse ada di atas elemen yang telah diklik.

Anda bisa melakukan ini dengan acara onmousemove seluruh dokumen. Anda dapat menggunakan event.targetuntuk merekam elemen tempat mouse berada. Kemudian di dalam acara onclick Anda, Anda dapat memeriksa untuk melihat apakah mouse benar-benar di atas elemen yang diklik (atau anak elemen).

Dari sana Anda dapat memilih untuk mengandalkan acara klik untuk keduanya dan mengambil tindakan A atau B tergantung pada hasilnya. Tindakan B bisa berupa apa-apa jika beberapa perangkat sentuh tidak memancarkan acara klik (sebagai gantinya Anda harus mengandalkan acara * ontouch).

Saya tidak berpikir itu mungkin untuk mengidentifikasi perangkat sentuh saja (setahu saya tentu saja). Masalah utama adalah semua acara mouse dan keyboard dipecat oleh perangkat sentuh juga. Lihat contoh berikut, kedua peringatan mengembalikan true untuk perangkat sentuh.

function is_touch_present() {
  return ('ontouchstart' in window) || ('onmsgesturechange' in window);
}

function is_mouse_present() {
  return (('onmousedown' in window) && ('onmouseup' in window) && ('onmousemove' in window) && ('onclick' in window) && ('ondblclick' in window) && ('onmousemove' in window) && ('onmouseover' in window) && ('onmouseout' in window) && ('oncontextmenu' in window));
}

alert("Touch Present: " + is_touch_present());
alert("Mouse Present: " + is_mouse_present());

Ide terbaik menurut saya adalah mousemovependengar (saat ini adalah jawaban teratas). Saya percaya bahwa metode ini perlu sedikit di-tweak. Memang benar bahwa browser berbasis sentuhan meniru bahkan mousemove event, seperti yang Anda lihat dalam diskusi iOS ini , jadi kita harus sedikit berhati-hati.

Masuk akal bahwa browser berbasis sentuhan hanya akan meniru acara ini ketika pengguna mengetuk layar (jari pengguna turun). Ini berarti kita harus menambahkan tes selama pengendali mouse kita untuk melihat tombol mouse mana yang turun (jika ada) selama acara berlangsung. Jika tidak ada tombol mouse yang mati, kami dapat dengan aman menganggap mouse asli hadir. Jika tombol mouse mati, tes tetap tidak meyakinkan.

Jadi bagaimana ini diterapkan? Pertanyaan ini menunjukkan bahwa metode yang paling dapat diandalkan untuk memeriksa tombol mouse mana yang mati selama perpindahan mouse adalah dengan benar-benar mendengarkan 3 peristiwa di tingkat dokumen: mouse mouse, mouse mouse dan mouseup. Atas dan ke bawah hanya akan menetapkan bendera boolean global. Langkah tersebut akan melakukan tes. Jika Anda memiliki gerakan dan boolean salah, kita dapat mengasumsikan mouse ada. Lihat pertanyaan untuk contoh kode yang tepat.

Satu komentar terakhir .. Tes ini tidak ideal karena tidak dapat dilakukan dalam waktu buka. Oleh karena itu, saya akan menggunakan metode peningkatan progresif seperti yang disarankan sebelumnya. Secara default, tunjukkan versi yang tidak mendukung antarmuka mouse spesifik mouse. Jika mouse ditemukan, aktifkan mode ini dalam runtime menggunakan JS. Ini akan muncul semulus mungkin bagi pengguna.

Untuk mendukung perubahan dalam konfigurasi pengguna (mis. Mouse telah diputuskan), Anda dapat menguji ulang secara berkala. Meskipun saya percaya akan lebih baik dalam hal ini untuk hanya memberi tahu pengguna tentang 2 mode dan membiarkan pengguna secara manual beralih di antara mereka (sangat mirip dengan pilihan mobile / desktop yang selalu dapat dibalik).

Menjalankan beberapa tes di berbagai PC, Linux, iPhone, ponsel Android dan tab. Aneh bahwa tidak ada solusi anti peluru yang mudah. Masalah muncul ketika beberapa yang memiliki Sentuh dan tidak ada mouse masih menyajikan acara Sentuh dan Mouse untuk aplikasi. Karena ingin mendukung instance hanya mouse dan sentuh saja, ingin memproses keduanya, tetapi ini menyebabkan dua kali lipat interaksi pengguna. Jika bisa tahu mouse tidak ada di perangkat, maka bisa tahu untuk mengabaikan acara mouse palsu / dimasukkan. Mencoba mengatur flag jika MouseMove ditemukan, tetapi beberapa browser melempar MouseMove palsu serta MouseUp dan MouseDown. Sudah mencoba memeriksa stempel waktu tetapi menganggap ini terlalu berisiko. Intinya: Saya menemukan browser yang menciptakan acara mouse palsu selalu menyisipkan MouseMove tunggal sebelum MouseDown yang dimasukkan. Dalam 99,99% dari kasus saya, saat berjalan pada sistem yang memiliki mouse asli, ada beberapa kejadian MouseMove berturut-turut - setidaknya dua. Jadi, pantau apakah sistem menemukan dua peristiwa MouseMove berturut-turut dan menyatakan tidak ada mouse jika kondisi ini tidak pernah dipenuhi. Ini mungkin terlalu sederhana, tetapi bekerja pada semua pengaturan pengujian saya. Saya pikir saya akan tetap menggunakannya sampai saya menemukan solusi yang lebih baik. - Jim W

Solusi sederhana di jQuery untuk mendeteksi penggunaan mouse, yang memecahkan masalah di mana perangkat seluler juga memicu acara 'mousemove'. Cukup tambahkan pendengar touchstart untuk menghapus pendengar mousemove, sehingga tidak terpicu saat disentuh.

$('body').one('touchstart.test', function(e) {
  // Remove the mousemove listener for touch devices
  $('body').off('mousemove.test');
}).one('mousemove.test', function(e) {
  // MOUSE!
});

Tentu saja, perangkat masih bisa menyentuh DAN mouse, tetapi di atas akan menjamin bahwa mouse asli digunakan.

Baru saja menemukan solusi yang menurut saya cukup elegan.

// flag as mouse interaction by default
var isMouse = true;

// detect a touch event start and flag it
$(window).on('touchstart', function () {
  // if triggers touchstart, toggle flag
  // since touch events come before mouse event / click
  // callback of mouse event will get in callback
  // `isMouse === false`
  isMouse = false;
});

// now the code that you want to write
// should also work with `mouse*` events
$('a.someClass').on('click', function () {
  if (isMouse) {
    // interaction with mouse event
    // ...
  } else {
    // reset for the next event detection
    // this is crucial for devices that have both
    // touch screen and mouse
    isMouse = true;

    // interaction with touch event
    // ...
  }
});

Saya mengalami masalah yang sama, di mana satu sentuhan juga terdaftar sebagai klik. Setelah saya membaca komentar dari jawaban terpilih, saya datang dengan solusi saya sendiri:

var body = document.getElementsByTagName('body')[0];
var mouseCount = 0;

// start in an undefined state 
// (i use this to blend in elements once we decide what input is used)
var interactionMode = 'undefined';


var registerMouse = function() {
  // count up mouseCount every time, the mousemove event is triggered
  mouseCount++;

  // but dont set it instantly. 
  // instead wait 20 miliseconds (seems to be a good value for multiple move actions), 
  // if another mousemove event accoures switch to mouse as interaction 
  setTimeout(function() {
    // a touch event triggers also exactly 1 mouse move event.
    // So only if mouseCount is higher than 1 we are really moving the cursor by mouse.
    if (mouseCount > 1) {
      body.removeEventListener('mousemove', registerMouse);
      body.removeEventListener('touchend', registerTouch);

      interactionMode = 'mouse';
      console.log('now mousing');
      listenTouch();
    }

    // set the counter to zero again
    mouseCount = 0;
  }, 20);
};

var registerTouch = function() {
  body.removeEventListener('mousemove', registerMouse);
  body.removeEventListener('touchend', registerTouch);

  interactionMode = 'touch';
  console.log('now touching');
  mouseCount = 0;

  listenMouse();
};

var listenMouse = function() {
  body.addEventListener("mousemove", registerMouse);
};
var listenTouch = function() {
  body.addEventListener("touchend", registerTouch);
};

listenMouse();
listenTouch();

// after one second without input, assume, that we are touching
// could be adjusted to several seconds or deleted
// without this, the interactionMode would stay 'undefined' until first mouse or touch event
setTimeout(function() {
  if (!body.classList.contains('mousing') || body.classList.contains('touching')) {
    registerTouch();
  }
}, 1000);

/* fix, so that scrolling is possible */

html,
body {
  height: 110%;
}

Mouse or touch me

Satu-satunya masalah yang saya temukan adalah, Anda harus dapat menggulir, untuk mendeteksi acara sentuh dengan benar. satu tab (sentuhan) dapat membuat masalah.

Saya menghabiskan waktu berjam-jam untuk mencari tahu masalah ini untuk aplikasi Phonegap saya dan saya membuat hack ini. Ini menghasilkan peringatan konsol jika acara yang dipicu adalah peristiwa "pasif", yang berarti tidak mengaktifkan perubahan apa pun, tetapi berhasil! Saya akan tertarik pada ide untuk meningkatkan atau metode yang lebih baik. Tetapi ini secara efektif memungkinkan saya untuk menggunakan $ .touch () secara universal.

$(document).ready(function(){
  $("#aButton").touch(function(origElement, origEvent){
    console.log('Original target ID: ' + $(origEvent.target).attr('id'));
  });
});

$.fn.touch = function (callback) {
    var touch = false;
    $(this).on("click", function(e){
        if (!touch)
        {
            console.log("I click!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }else{
            touch = true;
        }
        touch = false;
    });
    $(this).on("touchstart", function(e){
        if (typeof e.touches != typeof undefined)
        {
            e.preventDefault();
            touch = true;
            console.log("I touch!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="aButton">A Button</button>

masalah utama yang saya lihat di sini adalah bahwa sebagian besar perangkat sentuh menyalakan sebuah acara mouse bersama dengan sentuhan satu sentuhan (touchstart -> mousedown, touchmove -> mousemove, dll). Hanya untuk keyboard, akhirnya untuk yang modern, mereka memiliki browser generik sehingga Anda bahkan tidak dapat mendeteksi keberadaan kelas MouseEvent.

Solusi yang kurang menyakitkan di sini adalah, menurut pendapat saya, untuk menampilkan menu saat peluncuran (dengan manajemen 'alt' untuk pengguna keyboard saja) dan mungkin menyimpan pilihan dengan localStorage / cookies / serveride atau yang lain untuk menjaga pilihan yang sama berikutnya waktu pengunjung datang.

Saya sangat merekomendasikan menentang pendekatan ini. Pertimbangkan layar sentuh, perangkat berukuran desktop, dan Anda memiliki serangkaian masalah yang berbeda untuk dipecahkan.

Harap jadikan aplikasi Anda dapat digunakan tanpa mouse (yaitu, tidak ada pratinjau melayang).

Ingin merekomendasikan skrip yang membantu saya:

Saya telah membaca dan mencoba segala sesuatu yang disarankan, tanpa hasil yang memadai.

Lalu saya menyelidiki lagi, dan menemukan kode ini - device.js

Saya menggunakan ini di situs web klien saya, untuk mendeteksi keberadaan mouse:
( <html>seharusnya memiliki desktopkelas) dan sepertinya cukup bagus, dan untuk touchdukungan, saya hanya melakukan pemeriksaan rutin 'ontouchend' in documentdan menggunakan informasi dari kedua deteksi untuk mengasumsikan hal spesifik yang saya butuhkan.

Pada umumnya ide yang lebih baik untuk mendeteksi jika fungsi mouseover didukung daripada mendeteksi tipe OS / browser. Anda dapat melakukannya hanya dengan yang berikut:

if (element.mouseover) {
    //Supports the mouseover event
}

Pastikan Anda tidak melakukan hal berikut:

if (element.mouseover()) {
    // Supports the mouseover event
}

Yang terakhir sebenarnya akan memanggil metode, daripada memeriksa keberadaannya.

Anda dapat membaca lebih lanjut di sini: http://www.quirksmode.org/js/support.html