多次发射骨干事件

我使用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

多次发射骨干事件

回答

相关问题