2017-09-01 10 views
3

これは本当に愚かな質問かもしれませんが、私はそれを理解することはできません。標準HTMLボタンを使用してイベントを発行することはできますか?

基本的には、画面に触れたときに(私たちが注文しているGoogleの厚紙のモデル上の物理的なボタンを使用して)、単一のイベントを出したいだけです。どのように '画面全体のタッチ'をするのかうまくいかなかったので、私はAシーンの外にボタン要素を作った。これは、ボタンが画面に当たるところに絶対配置され、コンソールのログは(マウスで)クリックされたときに記録されるため、ボタンが機能することがわかります。しかし、イベントまたはsetAttributeを発行しようとすると何も起こりません。

私が間違っていることがあるのですか、それともより適切な方法がありますか?

ここでは、コードです:

<body> 
    <button id="nav-btn" class="btn btn-primary">Menu</button> 
    <a-scene id="scene"> 

と:

AFRAME.registerComponent('nav', { 
    schema: {}, 

    init: function() { 
     var navBtn = document.querySelector('#nav-btn'); 
     var btnEls = document.querySelectorAll('.link'); 

     navBtn.addEventListener('click', function() { 
      console.log('clicked'); 

      for (var i = 0; i < btnEls.length; i++) { 
       console.log(btnEls[i]); 
       btnEls[i].emit('menuFade'); 
      } 
     }); 
    }, 
}); 

ボタンとA-エンティティを使用している場合これは仕方によって動作しますが、私も作る方法を見つけることができませんでしたが、それは物理的なボタンとして働く!

ありがとうございました!

+0

@AaronTomlinsonありがとう!それは知っておくと便利です(そして、私は尋ねなければならないと信じられません)。しかし、残念なことに放出を助けません:/ – Harry

+0

'getAttribute()'が動作するためには、 。私はあなたのコンソールログが、もし何か... 'btnEls [i] .'がなくなっていると思われるなら' undefined'を返すと確信しています。 'btnEls [i] .emit( 'menuFade');' btnElsはノードリストだけなので、これはソースコードのために私に目立つものです。 – NewToJS

+0

@NewToJSおっと、申し訳ありませんが、私が少し上手く投稿した内容を読んでいたはずです。私のコードは、これを動作させるためのさまざまな試みの混乱です...そのgetAttributeは、私が試していた何かから残ったものでした。私は手でこれを試していましたが、同じことをやりました:/ – Harry

答えて

2

Google Cardboardで物理ボタンが押されたときを気にする場合は、ボタン要素は必要ありません。 windowに「クリック」または「touchstart」ハンドラをアタッチして、あなたは良いことがあります:

window.addEventListener('touchstart', function(evt) { 
    console.log('there we go') 
}) 

emitことが理由である、イベントを発するのバニラJSの方法が、A-フレーム固有の機能ではありませんボタンからは機能しません。

window.addEventListener('touchstart', function(evt) { 
    console.log('there we go') 
    window.dispatchEvent(new CustomEvent('menuFade')) 
}) 

あなたはa-scene内部の何かにイベントを発するオブジェクトを変更する必要があるかもしれませんが、それは動作するはずです:

あなたはその代わりためdispatchEventCustomEventを使用することができます。

+0

ありがとうございます!それはまさに私が後にしたことです - 本当にそれを仲間に感謝します。 – Harry

関連する問題