CODEWITHSUNDEEP
javascripttouch-eventtouchscreen
Furkan Gözükara
Furkan Gözükara

Reputation: 23830

How to detect mobile devices with TouchEvent but differentiate touch screen PCs as well by using javascript

I know that there are lots of similar questions.

Currently, I use the below code to detect touch screen devices and I mark them as mobile devices.

    function isMobile() {
    try {
        document.createEvent("TouchEvent");
        console.log("mobile");
        return true;
    }
    catch (e) {
        console.log("pc");
        return false;
    }
}

It works good on mobile devices but what about touch screen PCs that also have a keyboard and mouse? How can I differentiate them?

Since I don't have a touch screen PC I am not able to test and solve this issue.

I want to determine if it is a mobile device such as a mobile phone or tablet basically devices that have no mouse and keyboard or it is a PC that has a keyboard and mouse.

Upvotes: 1

Views: 1380

Answers (2)

TK421
TK421

Reputation: 905

UPDATE: After further exploring of the documentation, just use: Pointer Events; it should handle any type of touch/mouse/pen that is available to the modern web. If you need to differentiate, you can check the event pointerType.

A very good question, one I've grappled with recently in 2024.

I've discovered a good way to check is by simply checking if the "changedtouches" property is "in" the "click" event.

Per MDN documentation (https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)

An element receives a click event when any of the following occurs:

 - a pointing-device button (such as a mouses primary button) 
is both pressed and released while the pointer is located inside the element.
 - a touch gesture is performed on the element

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches

element.addEventListener("click", (event) => {
  if ("changedtouches" in event) {
    // touch event handler
    console.log("touch event");
  } else {
    // mouse handlers
    console.log("mouse event");
  }
}

In this way, it is completely dependent on the event. It makes the device type irrelevant. If the device is an iPad with a Bluetooth mouse, it will handle for either touch or mouse click based on the event properties.

If you still need to detect for keyboard, probably the best way is the method that Jacob mentioned. There is a navigator.keyboard method (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard) but as of right now (01.30.2024) only Edge and Chrome support it, so won't work for iOS/Mac devices.

Upvotes: 0

Jacob
Jacob

Reputation: 1835

I want to determine if it is a mobile device such as a mobile phone or tablet basically devices that have no mouse and keyboard or it is a PC that has a keyboard and mouse.

You can check if a device has a mouse pointer using the method presented by this answer:

const hasCursor = window.matchMedia('(pointer:fine)').matches

As far as I know, this should only be false for devices with no pointer, so laptops with both a touchscreen and a touchpad will not match this and this should be all you need.

Detecting if a keyboard is present is harder, in part because most mobile phones/tablets have support for an external keyboard that can be used. You probably won't need this method as the first way should cover all cases, but you can use a workaround to detect if a keyboard is present by listening for the first keyup event:

let hasKeyboard = false
document.addEventListener("keyup", () => {
  hasKeyboard = true
}, { once: true })

However this is pretty hacky as if a keyboard user never uses their keyboard, they will show up as not having one. Only use this if you need to, otherwise just use the first method.

Upvotes: 2

Related Questions