双击听筒需要在iOS 13上点三下。

Question

我试图在iOS中监听全屏上的双击。

当双击一个简单的div时，一个最小的非框架例子可以工作。https:/fluoridated-nebulous-zebu.glitch.me。

但当附加到aframe的 canvas 在iOS上需要点击三次才能触发。https: /classic -infrequency -pram. glitch.me.

<script>
    function doubleClick(fn, timeout = 500) {
        let last = Date.now();

        return function(e) {
            const now = Date.now();
            const diff = now - last;

            console.log('single');

            if (diff < timeout) {
                fn(e);

                console.log('double');
            }

            last = now;
        }
    };

    AFRAME.registerComponent('double-click', {

        init: function() {
            this.el.sceneEl.canvas.addEventListener('click', doubleClick(this.onDoubleClick.bind(this)));
        },

        onDoubleClick: function() {
            this.el.setAttribute('color', '#ff0000');
        }
    });
</script>

<a-scene background="color: #FAFAFA">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow double-click></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>

似乎第二次点击被节制了，但我不确定是谁。我无法在aframe的画布设置中找到任何可以做到这一点的代码，甚至在Safari的检查器中手动删除任何不是我自己的监听器也没有任何区别。

编辑：如果你点击的速度足够慢，以避免被节流，并且速度足够快，在超时之下，它也可以工作。

编辑2：也好像在iOS 12上能用，但在13上不能用。

Answer 1

从一个Github线程中找到了一个解决方案。https:/github.comLeafletLeafletissues6817#issuecomment-535919797。

在研究一个类似的问题时，我看到了这个帖子。我发现，在 touchstart 上调用 preventDefault 可以让你像往常一样接收触摸事件，从而像以前一样检查双击。

我相信这是因为移动Safari改变了模拟悬停事件的方式（使那些完全依靠悬停事件打开菜单等的网站能够正常工作）。

我现在在听 touchstart 取而代之的是 e.preventDefault() 的第一个事件。

function doubleClick (fn, timeout = 500) {
  let last = Date.now();

  return function (e) {
    const now = Date.now();
    const diff = now - last;

    console.log('single');

    if (diff < timeout) {
      fn(e);

      console.log('double');
    } else {
      e.preventDefault();
    }

    last = now;
  }
};

AFRAME.registerComponent('double-click', {

  init: function () {
    this.el.sceneEl.canvas.addEventListener('touchstart', doubleClick(this.onDoubleClick.bind(this)));
  },
        
  onDoubleClick: function () {
    this.el.setAttribute('color', '#ff0000');
  }
});

当然，在你的情况下，防止默认可能会导致问题，所以YMMV。另外，对于正常工作的设备，还是应该把点击作为后备处理。