JavaScript的触摸事件[重复]答案

【问题标题】：Touch events for JavaScript [duplicate]JavaScript的触摸事件[重复]
【发布时间】：2013-12-09 13:03:20
【问题描述】：

所以我已经试过了

function isTouchDevice() {
  return 'ontouchstart' in window;
}

    function customBindTest(ele, eventType, callback) {
    if ((eventType === 'click') && isTouchDevice()) {
        eventType = 'touchend';
    }
    var onevent = 'on' + eventType;
      if (ele.attachEvent) { // IE
        ele.attachEvent(onevent, callback);
    } else if (ele.addEventListener) {
        ele.addEventListener(eventType, callback, false);
    } else {
        ele[onevent] = callback;
    }
}

但我现在面临的问题是，当在带有触摸屏和鼠标垫的 Windows 8 等笔记本电脑上时。您不能在 Chrome 等浏览器中通过鼠标单击（而 IE10 很好，因为它没有 ontouchstart 键。

过去有没有人有任何想法或遇到过类似的问题？

【问题讨论】：

您提供的代码不会禁止鼠标点击。您应该显示处理“新闻”的代码
嗯，我正在测试它是否是一个触摸设备，然后绑定 touchend 而不是点击。
为什么不同时绑定？
在 iPad 等设备上绑定两者时，它会搞砸，例如我在视频标签上有这个来暂停视频。它搞砸了暂停然后播放就像发射两次一样......
很酷，谢谢，我会看看:)

标签： javascript html

【解决方案1】：

前段时间我写了一个自定义的触摸/鼠标事件系统，女巫保留滚动和其他一切正常，但它添加了基于他的设备的新事件。Wich 分别使用鼠标来创建滑动和点击或触摸。它也完成 mousemove / touchmove 之外的所有数学运算以使此函数无延迟。

首先我检查了我有哪些操作系统（在您的情况下，您需要更改此行以使其在 win8 中工作）

(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)?'touch':'mouse')

然后我创建了一个数组，其中包含鼠标和触摸事件的各种函数...

它创建了 6 个新事件。

fc: fastclick（尤其是对于 ios 设备，否则点击需要 500 毫秒）50 毫秒

sfc: superfastclick（这是针对固定元素的，基本上是在touchstart上）0ms

滚动时不要使用。

以及各种滑动swl、swr、swu、swd（向左、向右、向上和向下滑动）

鼠标的反应就像一个正常的触摸事件

如果你点击->按住->向右移动->松开它会给你一个向右滑动的事件。

告诉你在你的情况下你需要两者。（这可能是一个问题......不知道）但你可以通过删除这一行来做到这一点（也删除上面提到的设备检查）

for(var a in f[m]){d.addEventListener(a,f[m][a],false);}

替换成

for(var a in f['mouse']){d.addEventListener(a,f['mouse'][a],false);}
for(var a in f['touch']){d.addEventListener(a,f['touch'][a],false);}

我无法在 win 8 touch 上测试它...试试看。

http://jsfiddle.net/3u5pJ/

要测试只需滑动或点击查看控制台的结果框。

ps：因为 ie 10 是标准化的，所以一切都应该像在所有新的现代浏览器中一样工作。此代码不适用于过时的浏览器。

编辑

此示例在鼠标和触摸上添加触摸事件。

http://jsfiddle.net/3u5pJ/1/

要测试只需滑动或点击查看控制台的结果框。

是的，如果您使用该代码，则不应使用点击事件，因为它们在触摸设备中非常糟糕，而是使用自定义 fc 或 sfc。

用法：

element.addEventListener('swl',handlerFunction,false)//swipeleft

如果你有不明白的地方，就问吧。

【讨论】：