ตรวจพบว่าเบราว์เซอร์ไม่มีเมาส์และเป็นแบบสัมผัสเท่านั้น

ฉันกำลังพัฒนาเว็บแอพ (ไม่ใช่เว็บไซต์ที่มีหน้าข้อความที่น่าสนใจ) พร้อมอินเทอร์เฟซสำหรับการสัมผัสที่แตกต่างกันมาก (นิ้วของคุณซ่อนหน้าจอเมื่อคุณคลิก) และเมาส์ (อาศัยการแสดงตัวอย่างแบบโฮเวอร์มาก) ฉันจะตรวจสอบได้อย่างไรว่าผู้ใช้ของฉันไม่มีเมาส์ที่จะนำเสนออินเตอร์เฟซที่ถูกต้องกับเขา ฉันวางแผนที่จะออกจากสวิตช์สำหรับผู้ที่มีทั้งเมาส์และสัมผัส (เช่นสมุดบันทึกบางส่วน)

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

ในฐานะที่เป็นหมายเหตุด้านข้างอินเทอร์เฟซระบบสัมผัสของฉันอาจเหมาะสำหรับอุปกรณ์ที่มีคีย์บอร์ดเท่านั้นดังนั้นจึงไม่มีเมาส์ที่ฉันต้องการตรวจจับ

หากต้องการให้ชัดเจนยิ่งขึ้นนี่คือ API ที่ฉันต้องการใช้:

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

ปัญหาหลักคือคุณมีประเภทของอุปกรณ์ / กรณีการใช้ที่แตกต่างกันดังต่อไปนี้:

1. เมาส์และแป้นพิมพ์ (เดสก์ท็อป)
2. สัมผัสเท่านั้น (โทรศัพท์ / แท็บเล็ต)
3. เมาส์แป้นพิมพ์และแบบสัมผัส (แล็ปท็อปแบบสัมผัส)
4. Touch and keyboard (แป้นพิมพ์บลูทู ธ บนแท็บเล็ต)
5. เมาส์เท่านั้น (ปิดการใช้งานผู้ใช้ / การตั้งค่าการเรียกดู)
6. แป้นพิมพ์เท่านั้น (ปิดการใช้งานผู้ใช้ / การตั้งค่าการเรียกดู)
7. Touch and mouse (เช่นวางเมาส์เหนือเหตุการณ์จากปากกา Galaxy Note 2)

สิ่งที่แย่กว่านั้นคือหนึ่งสามารถเปลี่ยนจากคลาสเหล่านี้เป็นคลาสอื่น (ปลั๊กเมาส์เชื่อมต่อกับแป้นพิมพ์) หรือผู้ใช้อาจปรากฏบนแล็ปท็อปปกติจนกว่าจะถึงหน้าจอสัมผัส

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

ตัวอย่างเช่นสมมติว่าคุณค้นพบว่าผู้ใช้ปล่อย mousemove จริง (ไม่ใช่ของปลอมจากกิจกรรมการสัมผัสดูที่http://www.html5rocks.com/en/mobile/touchandmouse/ )

แล้วไง?

คุณเปิดใช้งานสไตล์โฮเวอร์หรือไม่ คุณเพิ่มปุ่มเพิ่มเติมหรือไม่

ไม่ว่าคุณจะเพิ่มเวลาในการกระจกเพราะคุณต้องรอให้เหตุการณ์ลุกลาม

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

ในรูปแบบสัญลักษณ์แสดงหัวข้อโควต้าที่https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101

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

นอกเหนือจาก: เบราว์เซอร์ไม่ทราบว่าเมื่อผู้ใช้เสียบเมาส์ / เชื่อมต่อกับแป้นพิมพ์ แต่ไม่เปิดเผยกับ JavaScript .. แดง!

สิ่งนี้จะนำคุณไปสู่สิ่งต่อไปนี้:

การติดตามความสามารถในปัจจุบันของผู้ใช้ที่กำหนดนั้นซับซ้อนไม่น่าเชื่อถือและไม่ได้ผลบุญ

ความคิดของการเพิ่มประสิทธิภาพแบบก้าวหน้านั้นทำได้ค่อนข้างดีที่นี่ สร้างประสบการณ์ที่ทำงานได้อย่างราบรื่นไม่ว่าบริบทของผู้ใช้จะเป็นอย่างไร จากนั้นให้ตั้งสมมติฐานตามคุณลักษณะของเบราว์เซอร์ / ข้อความค้นหาสื่อเพื่อเพิ่มฟังก์ชันการทำงานที่จะสัมพันธ์ในบริบทที่สันนิษฐาน การปรากฏตัวของเมาส์เป็นเพียงหนึ่งในหลากหลายวิธีที่ผู้ใช้ที่แตกต่างกันในอุปกรณ์ต่าง ๆ ได้สัมผัสกับเว็บไซต์ของคุณ สร้างบางสิ่งด้วยบุญที่เคอร์เนลและไม่ต้องกังวลมากเกินไปเกี่ยวกับการคลิกปุ่ม

วิธีการเกี่ยวกับการฟังเหตุการณ์วางเมาส์บนเอกสาร จากนั้นจนกว่าคุณจะได้ยินเหตุการณ์นั้นคุณถือว่าอุปกรณ์นั้นเป็นแบบสัมผัสหรือแป้นพิมพ์เท่านั้น

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

(สถานที่listenและunlistenมอบหมายให้addEventListenerหรือattachEventตามความเหมาะสม)

หวังว่านี่จะไม่นำไปสู่การมองเห็นที่ขาดหายไปมากเกินไปมันจะดูดถ้าคุณต้องการรูปแบบขนาดใหญ่อีกครั้งตามโหมด ...

ตั้งแต่ปี 2018 มีวิธีที่ดีและเชื่อถือได้ในการตรวจสอบว่าเบราว์เซอร์มีเมาส์ (หรืออุปกรณ์ป้อนข้อมูลที่คล้ายกัน): คุณสมบัติการโต้ตอบกับสื่อ CSS4ซึ่งขณะนี้ได้รับการสนับสนุนจากเบราว์เซอร์สมัยใหม่เกือบทุกรุ่น (ยกเว้น IE 11 และเบราว์เซอร์มือถือพิเศษ)

W3C:

คุณสมบัติสื่อตัวชี้ใช้เพื่อสอบถามการมีอยู่และความแม่นยำของอุปกรณ์ตัวชี้เช่นเมาส์

ดูตัวเลือกต่อไปนี้:

    /* 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) { ... }

คำสั่งสื่อสามารถใช้ใน JS:

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

ที่เกี่ยวข้อง:

เอกสาร W3: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

การสนับสนุนเบราว์เซอร์: https://caniuse.com/#search=media%20features

ปัญหาที่คล้ายกัน: ตรวจหาว่าอุปกรณ์ไคลเอนต์รองรับ: โฮเวอร์และ: สถานะโฟกัส

@ คำตอบของไวแอตต์นั้นยอดเยี่ยมและทำให้เราคิดมาก

ในกรณีของฉันฉันเลือกที่จะฟังการโต้ตอบครั้งแรกเพื่อตั้งค่าพฤติกรรมเท่านั้น ดังนั้นแม้ว่าผู้ใช้จะมีเมาส์ฉันจะถือว่าเป็นอุปกรณ์สัมผัสถ้าการโต้ตอบครั้งแรกเป็นการสัมผัส

พิจารณาลำดับที่ได้รับในการประมวลผลเหตุการณ์ :

1. touchstart
2. touchmove
3. touchend
4. วางเมาส์
5. mousemove
6. mousedown
7. mouseup
8. คลิก

เราสามารถสันนิษฐานได้ว่าหากเหตุการณ์เมาส์ถูกกระตุ้นก่อนการสัมผัสมันเป็นเหตุการณ์เมาส์จริงไม่ใช่เหตุการณ์จำลอง ตัวอย่าง (โดยใช้ 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);
});

ที่ทำงานให้ฉัน

เป็นไปได้ที่จะตรวจสอบว่าเบราว์เซอร์นั้นสามารถใช้การสัมผัสได้หรือไม่ ไม่มีวิธีที่จะรู้ว่าจริง ๆ แล้วมันมีหน้าจอสัมผัสหรือเมาส์เชื่อมต่ออยู่

หนึ่งสามารถจัดลำดับความสำคัญการใช้งานโดยฟังเหตุการณ์การสัมผัสแทนเหตุการณ์เมาส์หากตรวจพบความสามารถในการสัมผัส

ในการตรวจจับความสามารถในการสัมผัสข้ามเบราว์เซอร์:

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

จากนั้นหนึ่งสามารถใช้สิ่งนี้เพื่อตรวจสอบ:

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

หรือเพื่อเลือกกิจกรรมที่ต้องการฟัง:

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

หรือใช้วิธีการแยกต่างหากสำหรับการสัมผัสกับการไม่สัมผัส:

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
}

สำหรับเมาส์หนึ่งสามารถตรวจพบได้ว่ามีการใช้เมาส์หรือไม่เท่านั้น หนึ่งสามารถติดตั้งค่าสถานะโกลบอลเพื่อระบุว่าเมาส์ถูกตรวจพบโดยการใช้งาน (คล้ายกับคำตอบที่มีอยู่ แต่ลดความซับซ้อนลงเล็กน้อย):

var hasMouse = false;

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

(หนึ่งไม่สามารถรวมmouseupหรือmousedownเป็นเหตุการณ์เหล่านี้ยังสามารถเรียกใช้โดยการสัมผัส)

เบราว์เซอร์ จำกัด การเข้าถึง API ของระบบในระดับต่ำซึ่งจำเป็นเพื่อให้สามารถตรวจจับคุณลักษณะเช่นความสามารถด้านฮาร์ดแวร์ของระบบที่ใช้งานอยู่

มีความเป็นไปได้ที่จะเขียนปลั๊กอิน / ส่วนขยายเพื่อเข้าถึงสิ่งเหล่านี้ แต่ผ่าน JavaScript และ DOM การตรวจจับดังกล่าวนั้นมีข้อ จำกัด สำหรับจุดประสงค์นี้และจะต้องเขียนปลั๊กอินเฉพาะสำหรับแพลตฟอร์มระบบปฏิบัติการต่างๆ

ดังนั้นโดยสรุป: การตรวจจับดังกล่าวสามารถประมาณได้โดย "เดาดี" เท่านั้น

เมื่อMedia Queries Level 4พร้อมใช้งานในเบราว์เซอร์เราจะสามารถใช้คำสั่ง "pointer" และ "hover" เพื่อตรวจสอบอุปกรณ์ด้วยเมาส์

หากเราต้องการสื่อสารข้อมูลนั้นกับ Javascript เราสามารถใช้แบบสอบถาม CSS เพื่อกำหนดสไตล์เฉพาะตามประเภทอุปกรณ์แล้วใช้getComputedStyleใน Javascript เพื่ออ่านสไตล์นั้นและสืบทอดประเภทอุปกรณ์ดั้งเดิมจากนั้น

แต่เมาส์สามารถเชื่อมต่อหรือถอดปลั๊กได้ตลอดเวลาและผู้ใช้อาจต้องการสลับระหว่างการสัมผัสและเมาส์ ดังนั้นเราอาจต้องตรวจจับการเปลี่ยนแปลงนี้และเสนอให้เปลี่ยนอินเทอร์เฟซหรือทำโดยอัตโนมัติ

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

@SamuelRossille ไม่มีเบราว์เซอร์ที่ฉันตระหนักถึงการมีอยู่ของ (หรือขาดมัน) เมาส์โชคไม่ดี

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

เราสามารถทำอย่างดีที่สุดเพื่อค้นหาว่าผู้ใช้กำลังใช้เมาส์หรือสัมผัสในเวลาใดก็ตาม นี่เป็นตัวอย่างที่รวดเร็วและสกปรกโดยใช้ 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');

ตอนนี้คุณสามารถผูก / สมัครสมาชิก usingMouse () & usingTouch ()และ / หรือกำหนดรูปแบบส่วนต่อประสานกับคลาสbody.mouse อินเทอร์เฟซจะสลับไปมาทันทีที่ตรวจพบเคอร์เซอร์ของเมาส์และเปิดเครื่อง

หวังว่าเราจะมีตัวเลือกที่ดีกว่าจากผู้ขายเบราว์เซอร์ในไม่ช้า

Tera-WURFLสามารถบอกความสามารถของอุปกรณ์ที่กำลังเยี่ยมชมเว็บไซต์ของคุณโดยการเปรียบเทียบลายเซ็นของเบราว์เซอร์กับฐานข้อมูล ดูสิมันฟรี!

ทำไมคุณไม่ลองตรวจสอบดูว่ามันมีความสามารถในการสัมผัสและ / หรือตอบสนองต่อการเคลื่อนไหวของเมาส์หรือไม่?

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

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

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

ลองดูที่ modenizr หนึ่งในคุณสมบัติของมันคือการสัมผัส

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

ในขณะที่ฉันไม่ได้ทดสอบอย่างเต็มที่ดูเหมือนว่าจะทำงานได้ดีมาก

นอกจากนี้ยังมีลิงก์จากหน้า modernizr http://www.html5rocks.com/en/mobile/touchandmouse/

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

กิจกรรมสัมผัสและกิจกรรมเมาส์เป็นพิเศษ ดังนั้นสิ่งนี้สามารถช่วยในการดำเนินการที่แตกต่างกันบ้าง ปัญหาคือเหตุการณ์การสัมผัสอยู่ใกล้กับเหตุการณ์ขึ้น / ลง / ย้ายของเมาส์และยังทริกเกอร์เหตุการณ์การคลิก

จากคำถามที่คุณบอกว่าคุณต้องการให้มีการโฮเวอร์เพื่อแสดงตัวอย่าง นอกเหนือจากนั้นฉันไม่ทราบรายละเอียดอื่น ๆ เกี่ยวกับอินเทอร์เฟซของคุณ ฉันสมมติว่าไม่มีเมาส์ที่คุณต้องการให้แตะเพื่อแสดงตัวอย่างในขณะที่คลิกทำการกระทำที่แตกต่างเนื่องจากการแสดงตัวอย่างแบบโฮเวอร์

หากเป็นกรณีนี้คุณสามารถใช้วิธีการสันหลังยาวเพื่อตรวจจับได้:

เหตุการณ์ onclick จะถูกนำหน้าด้วยเหตุการณ์ onmouseover ด้วยเมาส์เสมอ ดังนั้นให้สังเกตว่าเมาส์นั้นอยู่ด้านบนขององค์ประกอบที่ถูกคลิก

คุณสามารถทำได้ด้วยเหตุการณ์ onmousemove ทั้งเอกสาร คุณสามารถใช้event.targetเพื่อบันทึกองค์ประกอบที่เมาส์อาศัยอยู่ จากนั้นภายในเหตุการณ์ onclick ของคุณคุณสามารถตรวจสอบเพื่อดูว่าจริง ๆ แล้วเมาส์นั้นเป็นองค์ประกอบเหนือการคลิกหรือไม่ (หรือลูกขององค์ประกอบ)

จากตรงนั้นคุณสามารถเลือกที่จะพึ่งพาเหตุการณ์คลิกสำหรับทั้งคู่และดำเนินการ A หรือ B ขึ้นอยู่กับผลลัพธ์ การกระทำ B อาจไม่เกิดผลอะไรเลยหากอุปกรณ์สัมผัสบางเครื่องไม่ปล่อยเหตุการณ์การคลิก

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

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

ความคิดที่ดีที่สุดในความคิดของฉันเป็นmousemoveผู้ฟัง (ปัจจุบันคำตอบด้านบน) ฉันเชื่อว่าวิธีนี้จะต้องมีการปรับแต่งเล็กน้อย มันเป็นความจริงที่เบราว์เซอร์ที่ใช้ระบบสัมผัสเลียนแบบแม้กระทั่งเหตุการณ์ mousemove อย่างที่คุณเห็นในการสนทนา iOS นี้ดังนั้นเราจึงควรระมัดระวังเล็กน้อย

มันสมเหตุสมผลแล้วที่เบราว์เซอร์แบบสัมผัสจะเลียนแบบเหตุการณ์นี้เมื่อผู้ใช้แตะที่หน้าจอ (นิ้วของผู้ใช้ไม่ทำงาน) ซึ่งหมายความว่าเราควรเพิ่มการทดสอบในระหว่างการจัดการ mousemove ของเราเพื่อดูว่าปุ่มเมาส์ใดที่ลง (ถ้ามี) ในระหว่างกิจกรรม หากปุ่มเมาส์ไม่ทำงานเราสามารถสันนิษฐานได้ว่ามีเมาส์จริงอยู่ หากปุ่มเมาส์ค้างการทดสอบจะไม่สามารถสรุปได้

ดังนั้นสิ่งนี้จะดำเนินการอย่างไร คำถามนี้แสดงให้เห็นว่าวิธีการที่เชื่อถือได้มากที่สุดในการตรวจสอบว่าปุ่มเมาส์ใดหยุดทำงานในขณะที่วางเมาส์เพื่อฟัง 3 เหตุการณ์ในระดับเอกสาร: mousemove, mousedown และ mouseup ขึ้นและลงจะตั้งค่าสถานะบูลีนทั่วโลกเท่านั้น การเคลื่อนไหวจะทำการทดสอบ หากคุณมีการเคลื่อนไหวและบูลีนเป็นเท็จเราสามารถถือว่าเมาส์มีอยู่ ดูคำถามสำหรับตัวอย่างรหัสที่แน่นอน

หนึ่งความคิดเห็นสุดท้าย .. การทดสอบนี้ไม่เหมาะเพราะไม่สามารถทำการโหลดได้ ดังนั้นฉันจะใช้วิธีการเพิ่มประสิทธิภาพแบบก้าวหน้าตามที่แนะนำก่อนหน้านี้ ตามค่าเริ่มต้นให้แสดงเวอร์ชันที่ไม่รองรับอินเทอร์เฟซโฮเวอร์เฉพาะของเมาส์ หากค้นพบเมาส์ให้เปิดใช้งานโหมดนี้ในรันไทม์โดยใช้ JS สิ่งนี้ควรปรากฏอย่างราบรื่นต่อผู้ใช้

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

ทดสอบบางอย่างเกี่ยวกับพีซี, Linux, iPhone, โทรศัพท์ Android และแท็บต่างๆ แปลกที่ไม่มีวิธีแก้ปัญหากระสุนง่าย ปัญหาเกิดขึ้นเมื่อบางคนที่มี Touch และไม่มีเมาส์ยังคงแสดงเหตุการณ์ Touch และ Mouse ไปยังแอปพลิเคชัน เนื่องจากต้องการสนับสนุนอินสแตนซ์ของเมาส์และแบบสัมผัสอย่างเดียวต้องการประมวลผลทั้งคู่ แต่สิ่งนี้ทำให้เกิดการโต้ตอบของผู้ใช้สองครั้ง หากสามารถรู้ว่าไม่มีเมาส์อยู่ในอุปกรณ์ก็สามารถทราบได้ว่าจะเพิกเฉยต่อเหตุการณ์เมาส์ปลอม / ถูกแทรก พยายามตั้งค่าสถานะหากพบ MouseMove แต่เบราว์เซอร์บางตัวมี MouseMove ปลอมรวมทั้ง MouseUp และ MouseDown พยายามตรวจสอบเวลาประทับ แต่คิดว่ามันเสี่ยงเกินไป บรรทัดล่าง: ฉันพบเบราว์เซอร์ที่สร้างเหตุการณ์เมาส์ปลอมแทรก MouseMove เดียวก่อนหน้า MouseDown ที่แทรกไว้เสมอ ใน 99.99% ของกรณีของฉัน เมื่อทำงานบนระบบที่มีเมาส์จริงมีเหตุการณ์ MouseMove ติดต่อกันหลายเหตุการณ์ - อย่างน้อยสองเหตุการณ์ ดังนั้นติดตามว่าระบบพบเหตุการณ์ MouseMove ติดต่อกันสองเหตุการณ์หรือไม่และประกาศว่าไม่มีเมาส์อยู่หากไม่พบเงื่อนไขนี้ นี่อาจจะง่ายเกินไป แต่ก็ใช้ได้กับการตั้งค่าการทดสอบทั้งหมดของฉัน คิดว่าฉันจะติดมันจนกว่าฉันจะหาทางออกที่ดีกว่า - จิมดับบลิว

วิธีแก้ปัญหาง่ายๆใน jQuery เพื่อตรวจจับการใช้เมาส์ซึ่งจะแก้ปัญหาที่อุปกรณ์มือถือเรียกเหตุการณ์ 'mousemove' เพียงเพิ่มเครื่องฟัง touchstart เพื่อลบฟัง mousemove เพื่อที่จะไม่ถูกทริกเกอร์เมื่อสัมผัส

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

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

เพิ่งพบทางออกที่ฉันคิดว่าค่อนข้างสง่างาม

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

ฉันพบปัญหาเดียวกันซึ่งมีการแตะเพียงครั้งเดียวด้วยการคลิก หลังจากที่ฉันอ่านความคิดเห็นของคำตอบที่ได้รับการโหวตชั้นนำฉันก็มาพร้อมกับโซลูชันของตัวเอง:

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

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

ฉันใช้เวลาหลายชั่วโมงในการหาปัญหานี้สำหรับแอพ Phonegap ของฉันและฉันก็พบกับแฮ็คนี้ มันสร้างคำเตือนคอนโซลหากเหตุการณ์ที่เรียกว่าเป็นเหตุการณ์ "แฝง" ซึ่งหมายความว่ามันไม่ได้กระตุ้นการเปลี่ยนแปลง แต่ก็ใช้งานได้! ฉันจะสนใจในความคิดใด ๆ เพื่อปรับปรุงหรือวิธีการที่ดีกว่า แต่สิ่งนี้ทำให้ฉันใช้ $ .touch () แบบสากลได้อย่างมีประสิทธิภาพ

$(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>

ปัญหาหลักที่ฉันเห็นที่นี่คืออุปกรณ์สัมผัสส่วนใหญ่ใช้งานเหตุการณ์เมาส์พร้อมกับระบบสัมผัสที่สอดคล้อง (touchstart -> mousedown, touchmove -> mousemove ฯลฯ ) ในที่สุดสำหรับแป้นพิมพ์รุ่นล่าสุดพวกเขามีเบราว์เซอร์ทั่วไปดังนั้นคุณจึงไม่สามารถตรวจจับการปรากฏตัวของคลาส MouseEvent ได้

ในความคิดของฉันจะเห็นได้ว่าการแก้ปัญหาที่เจ็บปวดน้อยกว่านี้คือการแสดงเมนูที่เปิดตัว (ด้วยการจัดการแบบ 'alt' สำหรับผู้ใช้ที่ใช้คีย์บอร์ดเท่านั้น) และอาจเก็บตัวเลือกไว้ด้วย localStorage / cookies / servers หรืออื่น ๆ เวลาที่ผู้มาเยี่ยม

ฉันขอแนะนำอย่างยิ่งต่อแนวทางนี้ พิจารณาหน้าจอสัมผัสอุปกรณ์ขนาดเดสก์ท็อปและคุณมีชุดของปัญหาที่แตกต่างกันเพื่อแก้ไข

โปรดทำให้แอปของคุณสามารถใช้งานได้โดยไม่ต้องใช้เมาส์ (เช่นไม่มีการแสดงตัวอย่างแบบโฮเวอร์)

ต้องการแนะนำสคริปต์ที่ช่วยฉัน:

ฉันได้อ่านและลองทุกอย่างที่แนะนำโดยไม่มีผลลัพธ์เพียงพอ

จากนั้นฉันทำการตรวจสอบเพิ่มเติมและพบรหัสนี้ - device.js

ฉันใช้สิ่งนี้ในเว็บไซต์ของลูกค้าของฉันเพื่อตรวจสอบการมีอยู่ของเมาส์:
( <html>ควรมีdesktopคลาส) และมันก็ค่อนข้างดีและสำหรับtouchการสนับสนุนฉันแค่ทำการตรวจสอบปกติ'ontouchend' in documentและใช้ข้อมูลจากการตรวจจับทั้งสองเพื่อรับสิ่งที่ฉันต้องการ

เป็นความคิดที่ดีกว่าในการตรวจสอบว่ารองรับฟังก์ชั่นการใช้เมาส์โอเวอร์มากกว่าการตรวจจับประเภท OS / เบราว์เซอร์ คุณสามารถทำได้โดยทำดังต่อไปนี้:

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

ตรวจสอบให้แน่ใจว่าคุณไม่ได้ทำสิ่งต่อไปนี้:

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

อันที่จริงจะเรียกวิธีการนี้แทนการตรวจสอบการมีอยู่ของมัน

คุณสามารถอ่านเพิ่มเติมได้ที่นี่: http://www.quirksmode.org/js/support.html