触摸浏览器中的元素(如指针 - 事件:无)

Question

问题:

我进行了搜索和搜索,但是我无法找到有关如何通过覆盖元素触发触摸事件的信息.我已经使用以下方法解决了鼠标点击事件的问题:

pointer-events: none;

这很简单,但它不适用于触摸事件.我知道有一些移动原生内容可以解决这个问题,但这纯粹适用于浏览器 - 移动和非移动浏览器.

该项目:

这是我的基本项目,Croppy.我有一些基本的触摸变焦和良好的拖动,但它受到我的作物div在画布上的阻碍(不幸的是,这在视觉上是必要的).如果你想直接修补它,还有一个例子.我试图在没有任何外部库作为练习的情况下完成所有操作.

任何帮助或指针将不胜感激!

Answer 1

也许这应该是显而易见的,但我找到了答案. 只有这样pointer-events: none 做的工作,但很少,我会一个人快速移动我的手指把它引发的权利.为了让它100%工作,我touchstart在overlay元素中添加了一个事件监听器,如下所示:

overlay.addEventListener('touchstart', function(e){
  e.preventDefault();
});

这看起来有点傻,但也许这与CSS和JavaScript如何踩到彼此的脚趾有关.我不知道.

有趣的是,没有e.preventDefault(),它仍然有效,但不是100%的时间.我不确定此操作是否严格要求该行才能正常工作.

编辑:顺便说一句,这是Android Chrome 31.0.1650.59.