是否可以使用标准HTML按钮发出事件？

也许这是一个非常愚蠢的问题，但我无法弄清楚。是否可以使用标准HTML按钮发出事件？

基本上所有我想要做的是触摸屏幕时发出一个事件（使用我们订购的谷歌纸板模型上的物理按钮）。无法弄清楚如何进行'全屏触摸'，所以我在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'); 
      } 
     }); 
    }, 
});

使用一个实体作为顺便说一下按钮时，此工作，但我也不能找出如何使那作为一个物理按钮！？

感谢您的任何帮助或建议！

来源

2017-09-01 Harry

@AaronTomlinson谢谢！这很方便知道（和简单.. omg，不能相信我不得不问） - 但不能帮助排除不幸：/ – Harry

为getAttribute（）工作，你不应该瞄准那个元素。我确定你的控制台日志会返回'undefined'，如果有的话......似乎在它前面缺少'btnEls [i] .'。这是第一个突出我的源代码，也是'btnEls [i] .emit（'menuFade'）;'因为'btnEls'不过是一个节点列表？ – NewToJS

@NewToJS哎呀，对不起，我应该读通过我发布的更好一点。我的代码是一个混乱的不同尝试得到这个工作......这个'getAttribute'是我尝试的其他东西剩下的剩余部分，我之前用[i]试过，但是同样的处理：/ – Harry

如果您关心的是何时在Google Cardboard上按下物理按钮，那么您甚至不需要按钮元素。附上“点击”或“touchstart”处理器的window，你应该是好的：

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

注意emit不发射事件的香草JS的方式，但A字架特定的功能，这是为什么它不会从一个按钮上工作。

您可以使用dispatchEvent和CustomEvent为代替：

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

您可能需要更改发射事件的a-scene里面的东西的对象，但它应该工作。

来源

2017-09-01 05:29:13 geekonaut

非常感谢你！这正是我所追求的 - 真正感谢它的伴侣。 – Harry

是否可以使用标准HTML按钮发出事件？

回答

相关问题