it-swarm-id.com

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 ketika Anda mengklik) dan mouse (sangat bergantung pada pratinjau hover) . 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);
135
nraynaud

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

  1. Mouse dan keyboad (desktop)
  2. Hanya sentuh (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 mouse (mis., Arahkan acara dari pena Galaxy Note 2)

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

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

Misalnya, Anda telah menemukan bahwa pengguna telah memancarkan 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 bangsawan 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 - mouse tidak akan ditentukan hingga benar (saya pikir ini lebih masuk akal daripada pengaturan Itu 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

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 pengguna saat ini yang kompleks, tidak dapat diandalkan, dan pantas diragukan

Gagasan peningkatan progresif berlaku cukup baik 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.

56
Wyatt

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 listen dan unlisten delegasikan ke addEventListener atau attachEvent yang sesuai.)

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

56
Dan

@ 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 nyata mouse, 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

23
Hugo Silva

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

Seseorang 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 menyertakan mouseup atau mousedown karena 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 seseorang harus menulis plugin khusus untuk berbagai platform OS.

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

9
user1693593

Ketika Kueri Media Level 4 tersedia di peramban, 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 getComputedStyle dalam Javascript untuk membaca gaya itu, dan menurunkan jenis perangkat asli darinya.

Tetapi mouse dapat terhubung 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.

7
joeytwiddle

Pada 2018 ada cara yang baik dan dapat diandalkan untuk mendeteksi apakah browser memiliki mouse (atau perangkat input serupa): fitur interaksi media CSS4 yang sudah didukung oleh sebagian besar Browser modern (dan sisanya akan untuk mengikuti segera). 

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 dapat digunakan di JS:

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

Terkait:

https://drafts.csswg.org/mediaqueries/#mf-interaction

Mendeteksi jika perangkat klien mendukung: hover dan: status fokus

6
Blackbam

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 :-)

6
Brandan

@SamuelRossille Tidak ada peramban yang saya ketahui 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');

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

Semoga kami akan memiliki beberapa opsi yang lebih baik dari vendor browser segera.

4
daredev

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);
}
2
iblue

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);
2

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

2
Gigi

masalah utama yang saya lihat di sini adalah bahwa sebagian besar perangkat sentuh menyalakan peristiwa mouse bersama dengan sentuhan satu sentuhan (touchstart -> mousedown, touchmove -> mousemove, dll). Untuk yang hanya menggunakan 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 salme berikutnya waktu pengunjung datang.

0
Ernoriel

Ide terbaik menurut saya adalah pendengar mousemove (saat ini jawaban teratas). Saya percaya bahwa metode ini perlu diubah sedikit. Memang benar bahwa browser berbasis sentuhan meniru bahkan mousemove event, seperti yang Anda lihat di 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? Ini pertanyaan menunjukkan bahwa metode yang paling dapat diandalkan untuk memeriksa tombol mouse mana yang turun selama mousemove adalah benar-benar mendengarkan 3 peristiwa di tingkat dokumen: mousemove, mousedown 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 di runtime menggunakan JS. Ini harus muncul semulus mungkin bagi pengguna.

Untuk mendukung perubahan dalam konfigurasi pengguna (mis. Mouse telah diputus), Anda dapat secara berkala menguji ulang. 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).

0
talkol

Sebuah solusi sederhana di jQuery untuk mendeteksi penggunaan mouse, yang memecahkan masalah di mana perangkat seluler juga memicu peristiwa '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 nyata digunakan.

0
suncat100

Saya menghabiskan waktu berjam-jam untuk mencari tahu masalah ini untuk aplikasi Phonegap saya dan saya membuat hack ini. Ini menghasilkan peringatan konsol jika peristiwa 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>

0
Jay

Saya tidak berpikir itu mungkin untuk mengidentifikasi perangkat sentuh saja (setahu saya tentu saja). Masalah utamanya 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());
0
Bikas

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, bahwa Anda harus dapat menggulir, untuk mendeteksi peristiwa sentuhan dengan benar. satu tab (sentuhan) dapat membuat masalah.

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, 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 memasukkan MouseMove tunggal sebelum MouseDown yang dimasukkan. Dalam 99,99% dari kasus saya, ketika berjalan pada sistem yang memiliki mouse nyata, ada beberapa peristiwa MouseMove berturut-turut - setidaknya dua. Jadi, pantau apakah sistem menemukan dua peristiwa MouseMove berturut-turut dan menyatakan tidak ada kehadiran 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

0
jwasch

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 acara mouse naik/turun/memindahkan, dan juga memicu acara klik.

Dari pertanyaan Anda, Anda mengatakan ingin mengarahkan kursor ke pratinjau. 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 melakukan pendekatan yang 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.target untuk merekam elemen tempat mouse berada. Kemudian di dalam acara onclick Anda, Anda dapat memeriksa untuk melihat apakah mouse sebenarnya lebih dari 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).

0
Luke

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/

0
exussum

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
    // ...
  }
});
0
Koala Yeung