触摸浏览器中的元素（如pointer-events：none） [英] Touch through an element in a browser (like pointer-events: none)

问题描述

问题：

我已搜索和搜索，但找不到有关如何通过覆盖元素触发触摸事件的信息。我已通过使用以下方法解决了鼠标点击事件的问题：

I've searched and searched, but I can't find information on how to get a touch event to trigger through an overlay element. I've solved the problem for mouse click events by using the following:

pointer-events: none;

这很简单，但它不适用于触摸事件。我知道有一些移动原生的东西可以解决这个问题，但这只是为浏览器 - 移动和非移动。

That was simple enough, but it doesn't work on touch events. I know there are some mobile native things that can solve this, but this is purely for browsers--both mobile and non-mobile.

项目：

这是我的基本项目， Croppy 。我有一些基本的触摸缩放和良好的拖动，但它阻碍了我的作物div在画布上（这是视觉上必要的，不幸的是）。有一个例子包括，如果你想直接修改它。我试图做所有没有任何外部库作为一个练习。

Here's my basic project, Croppy. I've got some rudimentary touch zoom and good dragging, but it's hampered by my crop div being on top of the canvas (this is visually necessary, unfortunately). There is an example included, if you wish to tinker with it directly. I'm trying to do it all without any external libraries as an exercise.

任何帮助或指针将非常感谢！

Any help or pointers would be greatly appreciated!

推荐答案

也许这应该是显而易见的，但我发现了一个答案。 只有执行 pointer-events：none 才能工作，但很少，我必须快速移动手指让它触发正确。为了使其工作100％，我向覆盖元素添加了 touchstart 事件侦听器，如下所示：

Perhaps this should've been obvious, but I found an answer. Only doing pointer-events: none does work, but only rarely, and I have to move my fingers around quickly to get it to trigger right. In order to make it work 100%, I added a touchstart event listener to the overlay element, like so:

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

这看起来有点蠢，但也许是CSS和JavaScript如何其他的脚趾这些天。我不知道。

This seems a bit silly, but maybe it has to do with how CSS and JavaScript are stepping on each other's toes these days. I don't know.

有趣的是，没有 e.preventDefault（），它仍然可以工作， ％ 的时间。我不确定该行是否严格要求此操作正常工作。

Interestingly, without e.preventDefault(), it still works, but not 100% of the time. I'm not sure that line is strictly required for this operation to work correctly.

编辑：这是在Android Chrome 31.0.1650.59顺便说一下。

This is in Android Chrome 31.0.1650.59 by the way.

这篇关于触摸浏览器中的元素（如pointer-events：none）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！