A框架：mouseenter/mouseleave仅适用于父实体

我有一个“目标圆”组件，它是一个带圆环的简单圆圈。我试图为整个组件获取mouseenter和mouseleave事件，但附属于父级元素的事件侦听器会为子实体触发元素，并且只有在raycaster点击某个元素时触发。A框架：mouseenter/mouseleave仅适用于父实体

我试图用各种方法将隐形命中测试圈/戒指放在试图缓解问题的位置，但它们都有多个进入/离开事件触发子实体的核心问题。

它是可行的/什么是最好的方式来获得进入/离开整个父实体的事件？

演示：https://output.jsbin.com/tucuxas/quiet

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> 
 
    <script> 
 
     AFRAME.registerComponent('target-circle', { 
 
     schema: { 
 
      position: {type: 'vec3', default: {x: 0, y: 0, z: 0}} 
 
     }, 
 

 
     init: function() { 
 
      var el = this.el; 
 

 
      el.setAttribute('position', this.data.position); 
 
      el.object3D.lookAt(new THREE.Vector3(0, 0, 0)); 
 

 
      var outerRing = document.createElement('a-entity'); 
 
      outerRing.setAttribute('class', 'outerRing'); 
 
      outerRing.setAttribute('material', { 
 
      color: 'black' 
 
      }); 
 
      outerRing.setAttribute('geometry', { 
 
      primitive: 'ring', 
 
      radiusInner: '1.2', 
 
      radiusOuter: '1.4' 
 
      }); 
 

 
      var innerCircle = document.createElement('a-entity'); 
 
      innerCircle.setAttribute('class', 'innerCircle'); 
 
      innerCircle.setAttribute('material', { 
 
      color: 'black' 
 
      }); 
 
      innerCircle.setAttribute('geometry', { 
 
      primitive: 'circle', 
 
      radius: '0.3' 
 
      }); 
 
      
 
      el.appendChild(outerRing); 
 
      el.appendChild(innerCircle); 
 
      
 
      el.addEventListener('mouseenter', function() { 
 
      console.log('mouseenter'); 
 
      }); 
 
      
 
      el.addEventListener('mouseleave', function() { 
 
      console.log('mouseleave'); 
 
      }); 
 
     } 
 
     }); 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <a-scene> 
 
     <a-entity target-circle='position: 0 3 -10'></a-entity> 
 
     <a-entity camera look-controls> 
 
     <a-entity id="cursor" cursor="fuse: false;" material="color: black; shader: flat;" 
 
        position="0 0 -1" 
 
        geometry="primitive: ring; radiusInner: 0.001; radiusOuter: .005; "></a-entity> 
 
     </a-entity> 
 
    </a-scene> 
 
    </body> 
 
</html>

来源

2017-07-12 Stephen

你想要的mouseenter /留给环内工作的空白区域？ –

我希望它能够在整个组件上工作，以便在光标通过外部黑色环时获得一个鼠标中心。然后，当你进入空白区域或内圈时没有任何事件发生，如果你将外部黑圈退出到场景的其余部分，则最后会有一个鼠标轮。谢谢！ :) – Stephen

使用pointer-events：none;子元素的CSS属性 – SamB

虽然SAMB的anwser在这种情况下是正确的，我不知道，如果挡住了指针的事件在CSS将在所有光线发射工作（即使它应该），这里是我的想法：将儿童包裹在容器实体中，仅用于光线投射：

因为您的整个实体由一个环和一个小圆圈组成，父实体只是儿童实体的空白持有者。
当你离开戒指时，mouseleave事件发生，因为戒指和圆圈之间没有任何东西。如果您要填充空间（2D），您需要：

创建一个子实体，它将是一个带有外环半径的不可见圆。隐形意味着opacity = 0，而不是visible = false（对于可见属性负责渲染，而不是可见性），并将其放置在其他孩子的前面。
使父实体成为一个圆原语，具有与上述相同的属性。

如果你想在三维空间中填充它，而不是一个圆，创建一个看不见的圆柱体，纸薄，只是因为它可以阻止来自各方的raycast。
工作小提琴here。

来源

2017-07-12 16:42:06

感谢Piotr。我之前尝试过这两种方法（这些方法都是等效的），并且发现由于像素与透明层重叠（它们处于相同的三维空间坐标），它仍然会触发重复的mouseenter/mouseleave事件。请参阅http://output.jsbin.com/nemuqut/quiet（例如透明为红色）。如果将光标移到中心小圆圈上，您将会重复进入/离开事件。 – Stephen

啊，得到你的更新，因为我张贴。可能是愚蠢的问题，但'0 0 0.01'的位置不适用于所有坐标/角度，对不对？我想我需要将沿着矢量的最热门的圆圈翻译到相机才是完全正确的。 – Stephen

@Stephen我已经更新了我anwser了一下，因为我发现这种行为，同时使一个捣鼓你，我希望这将是令人满意的，现在:) –

在你的CSS类innerCircle和outerCircle加下列财产

pointer-events: none;

来源

2017-07-12 16:45:16 SamB

你该死的CSS忍者，这其实是很大的，它会忽略所有光线投射/激光控制的东西等等？ –

是的，它应该。 – SamB

@Stephen，你试过了吗？ – SamB

A框架：mouseenter/mouseleave仅适用于父实体

回答

相关问题