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

标签 javascript browser touch mouse

现在,我正在处理一个支持拖放的项目的一部分。查看图片以进行说明:

picture

尽管它是德语,但我想它很简单:用户可以从顶部拖动蓝色框,在下面的灰色区域中说“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/

相关文章:

ios - 在 IOS 中触摸 View 时可以在触摸点上发光吗?

javascript - 如何从 typescript 上的txt文件获取数据?

javascript - Backbone.js 和 CakePHP

javascript - 如何在 DOM 之外设置 HTML 元素的样式?

android - 选择共享菜单时如何从浏览器获取html代码

iphone - UIView,它的 super View 和touchesBegan :

javascript - gif 动画反转为另一个 gf

javascript - 使用 require.js,您能否 (a) 定义一个简单的插件 (b) 展示如何从客户端 Angular 使用该插件?

javascript - 如何使用 Gulp autoprefixer 定位所有浏览器

jquery - 仅防止触摸时水平滚动