I'm using Backbone together with require.js and jQuery.
What I'm trying to do is to simply bind an event to a container which should show (mouseover) or hide (mouseout) a video. The event fires but unfortunately too many times (I've several children inside .intro-content
). I tried using ev.stopPropagation()
(as seen in the code) and ev.stopImmediatePropagation
but this doesn't prevent the bubbling. What am I doing wrong?
View:
define([
'jquery',
'underscore',
'backbone',
'global'
], function($, _, Backbone, Global){
var VideoView = Backbone.View.extend({
el: $('#splitlayout'),
events: {
'mouseover .side-left .intro-content': 'checkVideoState',
'mouseout .side-left .intro-content': 'checkVideoState'
},
render: function(){
this.playVideo('video', '0GsrOOV0gQM');
this.delegateEvents();
},
initialize: function() {
_.bindAll(this);
this.render();
},
checkVideoState: function(ev) {
ev.stopPropagation();
if(!$('#video').hasClass('active') && ev.type == 'mouseover') {
this.showVideo();
} else if($('#video').hasClass('active') && ev.type == 'mouseout') {
this.hideVideo();
}
},
showVideo: function() {
console.log('test');
$('#video').addClass('active');
player.playVideo();
},
hideVideo: function() {
console.log('test');
$('#video').removeClass('active');
player.pauseVideo();
},
playVideo: function(container, videoId) {
var self = this;
if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
window.onYouTubeIframeAPIReady = function() {
self.loadPlayer(container, videoId);
};
$.getScript('//www.youtube.com/iframe_api');
} else {
self.loadPlayer(container, videoId);
}
},
loadPlayer: function(container, videoId) {
player = new YT.Player(container, {
videoId: videoId,
playerVars: {
controls: 0,
loop: 1,
modestbranding: 0,
rel: 0,
showinfo: 0
},
events: {
'onReady': this.onPlayerReady
}
});
},
onPlayerReady: function() {
player.setPlaybackQuality('hd720');
player.seekTo(8,false);
player.pauseVideo();
}
});
return VideoView;
});