Question

我想听一下对象的长时间点击（比如两秒钟点击），为我的用户提供第二种交互形式，而不是单击。

我尝试了什么

我通过实现一个侦听鼠标事件的框架组件在桌面浏览器上实现了这一点。它会侦听mousedown事件，然后在更改单击实体的颜色之前设置两秒的超时。如果鼠标按钮在两秒钟后释放，我还有一个mouseup事件监听器来取消超时。

这在桌面上按预期工作，但不在移动设备上。为此，我尝试了touchstart事件的附加事件监听器，但它只是不起作用。

重现的步骤

这里我展示了我的代码在桌面上工作的片段，如果你点击并按住黄色框两秒钟，它会将其颜色更改为红色。如果你在两秒钟之前释放鼠标，超时就会被取消，并且没有进行颜色更改（当你点击黄色框然后拖动光标离开它时，即使释放鼠标也不会取消超时按钮前两秒钟，我想知道如果这个拖放取消我需要听一个不同的事件而不是mouseup）。

<head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  
  <script>
    AFRAME.registerComponent('long-click', {
      init: function() {
        var data = this.data;
        var el = this.el;

        var pressTimer = null;
        var longpress = false;

        el.addEventListener('mouseup', function(e) {
          if (pressTimer !== null) {
            clearTimeout(pressTimer);
            pressTimer = null;
          }

          if (longpress) {
            return false;
          }

          console.log('mouse up');
        }); // addEventListener('mouseup');
        
        // listens for mousedown and changes entity color after two seconds
        el.addEventListener('mousedown', function(e) {
          console.log("mouse down");

          longpress = false;

          pressTimer = setTimeout(function(){
            console.log("long click");
            AFRAME.utils.entity.setComponentProperty(el, 'material.color', 'red');

            longpress = true;
          },2000);

        });
      } // end of init
    });
  </script>

</head>

<body>
  <a-scene>
    <a-box long-click position="0 2 -2" color='yellow'></a-box>

    <a-camera>
      <a-entity cursor="fuse: false" position="0 0 -1" geometry="primitive: ring; radius-inner: 0.01; radius-outer: 0.03;" material="color: black; shader: flat"></a-entity>
    </a-camera>
  </a-scene>
</body>

我试过听touchstart事件，却一无所获。当您处于VR模式时，我该怎么做才能为手机提供相同的功能？

观察

我正在Mac上开发并使用三星Galaxy S6 Edge Plus中的Chrome for Android手机进行测试。

如何在一帧场景中检测长按实体？

0 个答案: