多次發射骨幹事件

我使用Backbone和require.js以及jQuery。我想要做的是簡單地將一個事件綁定到應該顯示（鼠標懸停）或隱藏（鼠標懸停）視頻的容器。事件發生，但不幸的是太多次（我有.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; 

});

來源

2014-01-22 enyce12

您可能已初始化您的視圖兩次。

以下是雙事件http://jsfiddle.net/rph4R的示例，您可以通過刪除最後一行new VideoView();來修復這些事件。

要檢查此您可以添加

console.log('initialize');

到VideoView.initialize()方法和檢查控制檯或使用debugger或console.trace()看到完整調用堆棧。

您還可以查看搜索該代碼在你的文件又算什麼呢

new VideoView();

來源

2014-01-23 09:01:48

您多次接收到該事件，因爲你有你的貨櫃多個孩子。每當鼠標移動到容器中的新孩子上時，都會觸發新事件。基本上，你想用mouseenter來代替。查看JQuery documentation底部的示例。

此事件類型由於事件冒泡可能會導致許多頭痛。對於實例，當鼠標指針在此示例中的Inner元素上方移動時，將向該元素髮送一個mouseover事件，然後涓涓細流至 Outer。這可以在不合時宜的時間內觸發我們的綁定鼠標懸停處理程序。請參閱.mouseenter（）的討論以獲取有用的備選方案。

來源

2014-01-22 17:41:38

謝謝你的答案，但和的mouseenter做鼠標離開也激發的事件多次.. – enyce12

@ enyce12請確保你沒初始化你的視圖兩次這裏是一個雙重事件的例子http://jsfiddle.net/rph4R/你可以通過刪除最後一行'new VideoView（）;'來修復它。要檢查這一點，你可以將'console.log（'initialize'）'添加到'initialize'方法並檢查控制檯。 –

@EugeneGlova就是這樣......我在一個路由器和另一個視圖中初始化它。謝謝！你可以在你的答案中加入這個提示嗎？ – enyce12

多次發射骨幹事件

回答

相關問題