现在,我正在处理一个支持拖放的项目的一部分。查看图片以进行说明:
尽管它是德语,但我想它很简单:用户可以从顶部拖动蓝色框,在下面的灰色区域中说“Verfügbare Empfä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。通过触发 mouse 或 touch beforehead,设置了两个 bool 值:hasMouse 和 hasTouch。当然,如果用户立即通过拖放刷新显示该部分的页面,这将不起作用。
如果有人可以帮助我或向我提供正确解决方案的链接,我会很高兴!
最好的问候
最佳答案
好吧,我错了。我尝试了一种不同的谷歌搜索方法,这样我找到了答案:
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)
关于javascript - 区分仅触摸设备和鼠标触摸设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54763579/