Магистральные события, срабатывающие несколько раз

Question

Я использую Backbone вместе с require.js и jQuery. То, что я пытаюсь сделать, - просто привязать событие к контейнеру, который должен показывать (наведение мыши) или скрывать (mouseout) видео. Событие срабатывает, но, к сожалению, слишком много раз (у меня несколько детей внутри .intro-content). Я пробовал использовать ev.stopPropagation() (как видно из кода) и ev.stopImmediatePropagation, но это не мешает пузыриться. Что я делаю не так?

Вид:

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; 

}); 

Answer 1

Возможно, вы дважды инициализировали ваш просмотр.

Приведен пример двойных событий http://jsfiddle.net/rph4R, которые вы можете исправить при удалении последней строки new VideoView();.

Чтобы проверить это, вы можете добавить

console.log('initialize'); 

методу VideoView.initialize() и проверить на консоли или использовать debugger или console.trace(), чтобы увидеть полный стек вызовов.

Вы также можете проверить поиск для этого кода в файлах и считать его

new VideoView(); 

Answer 2

Вы получаете это событие несколько раз, потому что у вас есть несколько детей в контейнере. Каждый раз, когда мышь перемещается над новым дочерним элементом в контейнере, запускается новое событие. В принципе, вы хотите использовать mouseenter. Взгляните на пример внизу JQuery documentation.

Этот тип события может вызвать много головных болей из-за пузырьков события. Для экземпляра , когда указатель мыши перемещается по внутреннему элементу в этом примере , на это будет отправлено событие мыши, затем просачивается до Outer. Это может вызвать наш связанный обработчик mouseover в нерабочее время раз. См. Обсуждение для .mouseenter() для полезной альтернативы.