当通过.live（）处理时，是否有可能阻止传播给父母的子点击事件？ [英] Is it possible to stop child click events propagating to parents when handled by .live()?

问题描述

我在这里的图片和内容上有'Back Board'： http://syndex.me
因此，基本上，您点击一张图片，它会覆盖点击内容上方的信息面板。

我想要做两件事：

• 点击网站的背景以淡出当前打开的信息面板


• 能够点击标签，链接，或在信息面板中的社交图标，而不触发其父功能，该功能又会淡出。 >我不能使用stopPropagation来取代父点击，因为我需要点击事件来处理.live（）（请参阅文档）这是由于帖子被动态加载的事实。
  
  
  

  我不能只是这样说：
  $（＃Background）。click（function（）{//淡出信息板}
  因为整个邮寄包装都包含了这个内容，所以我不能把事件放在帽子上，因为那样我就会在父母接管孩子事件的困境中更加深入： - ）

  
  
  

  到目前为止，我至少只能打开一个信息板（即，我点击一个图像，然后另一个图像，它会关闭已打开的信息板，并打开当前的信息板。所以这部分是很好的：

    $（'。theContent：not（.clicked）'）。live（click ，function（）{
   $（this）.children（'。postInfo'）。fadeIn（400）; 
   $（。clicked）。each（function（）{
   $ （this）.find（'。postInfo'）。fadeOut（400）; 
   $（this）.removeClass（'clicked'）; 
  }）; 
   $（this）.addClass （点击）; 
  }）; 
   $（'。clicked'）。live（click，function（）{
   $（。clicked）。each（function（）{
   $（this）.find （'.postInfo'）。fadeOut（400）; 
   $（this）.removeClass（'clicked'）; 
  }）; 
  }）; 
    

  Re .live（），.delegate（）和.stopPropogation（）：

  
  

  由于.live（）方法在事件传播到文档顶部之后处理事件，因此无法停止传播实时事件。同样，由.delegate（）处理的事件将传播到它们所委托的元素;在调用委托事件处理程序时，已经在DOM树中的任何元素上绑定了事件处理程序。因此，这些处理程序可能会通过调用event.stopPropagation（）或返回false来阻止委派的处理程序触发。

  
  

  
  

  解决方案

  如何简单地检查事件是否发生在特定元素上：
  
  

   函数激活（el）{
   el.find（'。postInfo'）。fadeIn（400）; 
   el.addClass（'clicked'）; 
  } 
   function deactivate（el）{
   el.find（'。postInfo'）。fadeOut（400）; 
   el.removeClass（'clicked'）; （'。'点击'））; 
   
   $（'。theContent：not（.clicked）'）。live（'click'，function（e）{
   deactivate b $ b activate（$（this））; 
  }）; $（$。$ click）'。live（click，function（e）{
   if（！$（e.target）.is（'a'））{
   //如果其中一个链接发生点击，则不应触发
  停用（$（this））; 
  } 
  }）; $（b）
   $（'＃ape'）。click（function（e）{
   if（$（e.target）.is（'＃ape'））{
   deactivate （$（'。clicked'））; 
  } 
  }）; 
    

  
  

  I have 'Back Board' on my images and content over here: http://syndex.me So basically, you click on an image, it will overlay a info panel above the clicked content.

  I want to do two things:

  • Click on the background of the site to fade out the currently opened info panel
  • Be able to click on a tag, link, or social icon within the info panel without triggering it's parent function, which is too fade out again.

  I cannot use stopPropagation for the child click being superseded by the parent click as i need the click events to be handled by .live() (see documentation) This is due to the fact that posts are being dynamically loaded.

  I cannot just say something like: $("#Background").click(function(){//fade out the Info Board} Because that is being covered by the entire post wrapper, and i can't put an event ont hat because then I'm even deeper in the dilemma of parents taking over children's events :-)

  So far I'm at least able to have just one infoboard open (i.e I click on one image, then another, it will close the already opened one, and open the current one. So this part is all good:

      $('.theContent:not(.clicked)').live("click", function () {
              $(this).children('.postInfo').fadeIn(400);
              $(".clicked").each(function() {
                      $(this).find('.postInfo').fadeOut(400);
                      $(this).removeClass('clicked');
              });
          $(this).addClass("clicked");
   });
       $('.clicked').live("click", function () {
              $(".clicked").each(function() {
                  $(this).find('.postInfo').fadeOut(400);
                  $(this).removeClass('clicked');
              });
   });
  

  Re .live(), .delegate() and .stopPropogation():

  Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

  解决方案

  How about simply checking whether the event actually took place on the specific element:

  function activate(el) {
      el.find('.postInfo').fadeIn(400);
      el.addClass('clicked');
  }
  function deactivate(el) {
      el.find('.postInfo').fadeOut(400);
      el.removeClass('clicked');
  }
  $('.theContent:not(.clicked)').live('click', function(e) {
      deactivate($('.clicked'));
      activate($(this));
  });
  
  $('.clicked').live("click", function(e) {
      if (! $(e.target).is('a')) {
          // this should not trigger if a click occured on one of the links
          deactivate($(this));
      }
  });
  
  $('#ape').click(function(e) {
      if ($(e.target).is('#ape')) {
          deactivate($('.clicked'));
      }
  });
  

  这篇关于当通过.live（）处理时，是否有可能阻止传播给父母的子点击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！