Distinguish between touch only and mouse-and-touch devices

问题

Right now, I am working on a part of a project which supports drag and drop. Look at the picture for clarification:

Even though it is German, I guess it is straightforward: The User can drag the blue boxes from the top saying "Verfügbare Empfänger" on the gray areas below. This works just fine.

On mobile devices, I just removed the drag and drop and the gray areas and can add the blue boxes by clicking on them.

Now for the actual problem: in order to detect touch, I used the following javascript method I dug up somewhere on StackOverflow:

if (window.matchMedia("(any-pointer: coarse)").matches) {
    vm.touchScreen = true;
}

Depending on the value of vm.touchScreen, drag is enabled/disabled. However, one of our customers has a device which supports BOTH touch and mouse. As you can imagine, because touchScreen is set to true in that case, the user cannot use drag and drop even though he has a mouse.

Therefore, I am looking for something like that:

getInputType=function(){
    if(somecheck1)return 1;/Touch only
    if(somecheck2)return 2;//Mouse only
    if(somecheck3)return 3;//Mouse and Touch
}

I actually have a somewhat functional solution already. However, it relies on the user triggering mouseEvents and touchEvents before even displaying the part which I showed you in the image. By triggering either mouse or touch beforehead, two booleans are set: hasMouse and hasTouch. Naturally, this does not work if the user refreshes the page which displays the part with drag and drops right away.

I would be glad if somebody could help me or provide me with a link to a proper solution!

Best Regards

回答1:

Alright, my mistake. I tried a different google search approach and that way, i found the answer:

How to detect if a device has mouse support?

In order to summarize, this is the code I am using:

if (window.matchMedia("(any-pointer: coarse)").matches) {
    hasTouch = true;
}
if (matchMedia('(pointer:fine)').matches) {
    hasMouse = true;
}

This way, you can detect if:

-The device has touch only (hasTouch&&!hasMouse)

-The device has mouse only (!hasTouch&&hasMouse)

-The device has both touch and mouse (hasTouch&&hasMouse)

来源：https://stackoverflow.com/questions/54763579/distinguish-between-touch-only-and-mouse-and-touch-devices