1）我正在构建一个非常普通的HTML5网站。
在这个网站上，几乎没有可点击的元素。它们嵌入在多层div中。
HAML说它看起来像：
%body
#root
#content
#header
#footer
在我的div #content中，我有几个可点击的按钮。一些可拖动的元素。和视频播放器。
- ＆GT;这会将鼠标事件用作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。
它可以工作但是：
#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你能帮助我吗？
如何让顶层能够捕捉触控手势并低于普通的可点击按钮？
答案 0 :(得分：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。虽然它适用于click，但让它在悬停工作是完全不同的事情，坦率地说，我不知道你如何实现这一目标。
答案 1 :(得分：0)
为什么不简单地检查设备的触摸支持，然后才动态插入#touch-area div？
用于评估设备是否支持功能x的goto解决方案是https://modernizr.com/。
以下是使用Modernizr识别支持触摸事件的设备的快速介绍，以及那些不支持触摸事件的设备：http://www.hongkiat.com/blog/detect-touch-device-modernizr/
答案 2 :(得分：-1)
您必须在触摸事件处理程序中使用Enterprise方法。