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

Question

现在，我正在研究支持拖放的项目的一部分。看图片进行说明：

即使是德语，我想也很简单：用户可以从顶部的蓝色框拖动下面的灰色区域显示“VerfügbareEmpfänger”。这样就可以了。

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

现在要解决实际问题：为了检测触摸，我使用了在StackOverflow上某个地方挖出的以下javascript方法：

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

根据vm.touchScreen的值，启用/禁用拖动。但是，我们的一位客户拥有同时支持触摸和鼠标的设备。可以想象，由于在这种情况下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甚至在图像中显示我向您展示的部分之前。通过触发鼠标或触摸前额，设置了两个布尔值：hasMouse和hasTouch。自然，如果用户刷新页面并立即拖动拖放该部分，则此操作将无效。

如果有人可以帮助我或为我提供适当解决方案的链接，我将感到非常高兴！

最好的问候

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）