javascript - html页面中的触摸事件和鼠标事件

Question

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捕获

我尝试过一些“黑客”

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

...然后只有触摸移动，直到触摸停止

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

4) stackoverflow 你能帮我吗？

如何让顶层能够捕捉触摸手势并发出普通的可点击按钮？

Answer 1

这将允许点击通过#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 。虽然它适用于点击，但让它适用于悬停则是完全不同的事情，坦率地说，我不知道如何实现这一点。