区分仅触摸设备和鼠标触摸设备

Question

现在，我正在处理一个支持拖放的项目的一部分。看图一目了然：

尽管它是德语，但我想它很简单：用户可以从顶部拖动蓝色框，在下面的灰色区域上说 "Verfügbare Empfänger"。这很好用。

在移动设备上，我只是删除了拖放和灰色区域，可以通过单击添加蓝色框。

现在解决实际问题：为了检测触摸，我使用了以下 javascript 我在 Whosebug 某处找到的方法：

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

根据 vm.touchScreen 的值，阻力为 enabled/disabled。但是，我们的一位客户拥有同时支持触摸和鼠标的设备。可以想象，因为在那种情况下 touchScreen 设置为 true，用户即使有鼠标也不能使用拖放。

因此，我正在寻找类似的东西：

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

实际上我已经有了一个有点实用的解决方案。但是，它依赖于用户在显示我在图像中向您展示的部分之前触发 mouseEvents 和 touchEvents。通过触发 mouse 或 touch beforehead，设置了两个布尔值：hasMouse 和 hasTouch。当然，如果用户立即刷新显示拖放部分的页面，这将不起作用。

如果有人能帮助我或向我提供 link 适当的解决方案，我会很高兴！

此致

Answer 1

好吧，我错了。我尝试了一种不同的 google 搜索方法，这样我找到了答案：

How to detect if a device has mouse support?

为了总结，这是我使用的代码：

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

这样，您可以检测是否：

-设备只有触摸（hasTouch&&!hasMouse）

-设备只有鼠标(!hasTouch&&hasMouse)

-设备同时具有触摸和鼠标功能(hasTouch&&hasMouse)

区分仅触摸设备和鼠标触摸设备

Distinguish between touch only and mouse-and-touch devices

javascript

browser

mouse

touch