googlearchive / vrview

Library for embedding immersive media into traditional websites.
http://developers.google.com/cardboard/vrview
Apache License 2.0
1.71k stars 1.09k forks source link

Multiple vrview players on single page - events are triggered on all instances #311

Open clarklyyc opened 6 years ago

clarklyyc commented 6 years ago

When there are more than 1 vrview players on a single page and an event is triggered ('ready', 'click', etc.) in one instance, it will fire all the event handlers for all vrview instances on the page.

Please see example code snippet (Codepen -https://codepen.io/anon/pen/EQjMNM):

$(window).on('load', function() {  
  $('.vrview').each(function() {
    var $this = $(this)
    var id = $this.attr('id')
    var src = $this.attr('data-src')

    var vrView = new VRView.Player('#' + id, {
      image: src,
      is_stereo: false
    })

    vrView.on('ready', function() {
      console.log('Ready')
    })

    vrView.on('click', function() {
      console.log('Clicked')
    })
  })
})
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

<div class="vrview" id="randomid1" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5961/HY360_0103.jpg"></div>

<div class="vrview" id="randomid2" data-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5961/HY360_0103.jpg"></div>

In the example, you'll see that 2 "Clicked" messages will appear each time one of the instances is clicked. This behavior happens on all the events I've tested with (ready, click, and getposition).