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僅適用於父實體

回答

相關問題