html页面中的触摸事件和鼠标事件答案

【问题标题】：touch event and mouse event in html pagehtml页面中的触摸事件和鼠标事件
【发布时间】：2017-08-20 19:11:21
【问题描述】：

1) 我正在构建一个非常普通的 HTML5 网站。

在这个网站上，可点击的元素很少。那些嵌入在多层div中。

HAML 说它看起来像：

%body
  #root
    #content
  #header
  #footer

在我的 div #content 中，我有几个可点击的按钮。一些可拖动的元素。和视频播放器。

-> 这利用鼠标事件作为click，mousemove，mouseenter ...

2) 我正在添加触摸手势检测

一切都很好，直到我想添加一个层（一个 div）来捕捉触摸手势。

然后我得到这个：

%body
  #root
    #content
  #header
  #footer
  #touch-area

这个#touch-area 大小的窗口能够通过touchstart、touchmove、touchstop 解释用户触摸手势

3) 酷！但我正在失去对鼠标事件的控制

这种构造的问题是所有鼠标事件都被#touch-area捕获

我尝试了一些«hacks»

3.1) 通过 CSS

将pointer-events: none添加到#touch-area同时禁用触摸事件。

3.2) JS 有什么可能？

阅读Click through div 。这家伙在顶部 div 中添加了一个 click 侦听器。隐藏此 div。重新触发事件。重新显示 div。

它可以工作，但是：

它使用 jQuery
我必须指定我希望通过我的#touch-area 传递的所有事件

3.3) 好的，让我们关注mousemove

所以我读了这个post about HTML5 and touchscreen。我发现了这个有趣的事件顺序：

1. touchstart
2. touchmove
3. touchend
4. mouseover
5. mousemove
6. mousedown
7. mouseup
8. click

但我：

首先我将mousemove 监听器添加到#touch-area。我在哪里隐藏#touch-area。
然后所有事件都会过去。
并且我添加了一个超时例程以在几毫秒后显示#touch-area。那是为了再次捕捉触摸事件。

但是...当我在触摸屏上滑动时。它首先检测到少数mousemove。然后序列touchstart、touchmove、touchstop 被触发。

当我滑动手指时，开始在#touch-area 上记录事件：

(事件名称后跟事件时间)

mouse enter
1490656039478
mouse move
1490656039479
mouse enter
1490656039483
mouse move
1490656039484
touch start
1490656039485
touch move
1490656039492
touch move
490656039498

...那么只有touch move 直到touch stop

所以我的计划被打破了:(

4) stackoverflow 你能帮帮我吗？

如何让顶层能够捕捉触摸手势和正常的可点击按钮？

【问题讨论】：

mikro，我非常感谢您为撰写问题所付出的努力，但至少对我而言，您的要求并不清楚。而且我认为我不必阅读您链接的所有资源才能理解这一点。您能否明确说明您想要达到的目标？ 20个字，还是更少？如果您认为这有助于理解问题，也许还可以提供minimal reproducible example？
你想要这个functionality而不使用jQuery吗？这会回答你的问题吗？
我明白了。这就是为什么我试图在第 4 点提出一个“简单”问题的原因。复杂性在于第 2 点所揭示的内容。我相信足够接近“最小示例”。最后，我在第 3 点描述了我的尝试。
@AndreiGheorghiu，不，因为 jQuery 的答案不能解决我的问题。
mikro，你能重新阅读我之前的问题吗？我特别问“没有jQuery”。如果我制作一个纯 js 脚本，在单击时禁用 #touch-area 上的指针事件，然后在同一位置再次单击，然后重新启用 #touch-area 上的指针事件，那对您没有帮助吗？

标签： javascript html css touch touch-event

【解决方案1】：

您必须在触摸事件处理程序中使用preventDefault() 方法。

Supporting Touch and Mouse event

【讨论】：

【解决方案2】：

这将允许点击通过#touch-area，而不使用jQuery：

let touchArea = document.getElementById('touch-area');
touchArea.onclick = function(e){
  touchArea.style.display = 'none';
  document.elementFromPoint(e.clientX, e.clientY).click();
  touchArea.style.display = 'block';
  return false;
}

工作example。虽然它适用于clicks，但让它适用于悬停是完全不同的事情，坦率地说，我不知道如何实现这一点。

【讨论】：

nice :) 但这不包括悬停事件，这些事件向用户显示可通过指针点击的内容，有时还带有视觉强调。这就是为什么我更关注mousemove。无论如何是迄今为止最好的选择。谢谢。

【解决方案3】：

为什么不简单地检查设备是否支持触摸，然后才动态插入#touch-area div？

我用于评估设备是否支持功能 x 的 goto 解决方案是 https://modernizr.com/。

以下是使用 Modernizr 识别支持和不支持触摸事件的设备的快速介绍：http://www.hongkiat.com/blog/detect-touch-device-modernizr/

【讨论】：

我不会为触摸设备动态添加#touch-aera，因为所有“点击”/“点击”都在下面描述了层。即使使用触摸设备，我也需要它。但是这个想法是存在的。当 #touch-area 不是特定手势（滑动、平移）时，我试图隐藏它。