当通过.live（）处理时，是否有可能阻止传播给父母的子点击事件？

问题描述

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

我想要做两件事：

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


• 能够点击标签，链接，或在信息面板中的社交图标，而不触发其父功能，该功能又会淡出。 >我不能使用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（）：

  
  

  解决方案

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

   函数激活（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.meSo 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():

  解决方案

  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（）处理时，是否有可能阻止传播给父母的子点击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！