区分纯触摸和鼠标触摸设备 [英] Distinguish between touch only and mouse-and-touch devices

问题描述

现在，我正在研究支持拖放的项目的一部分。看看图片是否清楚：

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

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

现在是实际问题：为了检测触摸，我使用了以下在StackOverflow上某处挖出的JavaScript方法：

  if（window.matchMedia（（任何指针：粗糙））。matches）{
 vm.touchScreen = true; 
} 
  

根据vm.touchScreen的值，启用/禁用拖动。但是，我们的一位客户拥有同时支持触摸和鼠标的设备。可以想象，由于在这种情况下touchScreen设置为true，因此即使用户有鼠标，也无法使用拖放操作。

因此，我在寻找

  getInputType = function（）{
 if（somecheck1）return 1; /仅触摸
 if（somecheck2）return 2; //仅鼠标
 if（somecheck3）return 3; //鼠标并触摸
} 
  

我实际上已经有了一个功能上可行的解决方案。但是，它依赖于用户触发mouseEvents和touchEvents甚至在图像中显示我向您展示的部分之前。通过触发鼠标或触摸前额，设置了两个布尔值：hasMouse和hasTouch。自然，如果用户刷新显示带有拖放内容的部分的页面，这将不起作用。

如果有人可以帮助我或提供我，我将非常高兴

最佳问候

解决方案

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

如何检测设备是否具有鼠标支持？

总而言之，这是我使用的代码：

  if（window.matchMedia（（任何指针：粗糙））。matches）{
 hasTouch = true; 
} 
 if（matchMedia（’（pointer：fine）’）。matches）{
 hasMouse = true; 
} 
  

这样，您可以检测到：

-该设备仅具有触摸功能（hasTouch& !! hasMouse）

-该设备仅具有鼠标功能（！hasTouch&&hasMouse）

-该设备同时具有触摸和鼠标功能（hasTouch& hasMouse）

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

解决方案

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)

这篇关于区分纯触摸和鼠标触摸设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！