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 你能帮我吗？
如何让顶层能够捕捉触摸手势并发出普通的可点击按钮？
最佳答案
这将允许点击通过#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 。虽然它适用于点击，但让它适用于悬停则是完全不同的事情，坦率地说，我不知道如何实现这一点。
关于javascript - html页面中的触摸事件和鼠标事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43057230/