Question

我对这段代码感到非常棘手。

首先，我有一系列图像，每个图像都在一个锚点内。

a > img

我想要的功能是，当您将鼠标悬停在图像上时，它会动态地向锚点添加2个共享按钮：

a > .fb + .twitter + img

当你滚落时，他们会被删除。

问题是，我还有一个绑定到a的灯箱。这意味着当您单击其中一个共享div时，它会正确显示共享框，但它也会触发灯箱。

我已尽力阻止这一切...... preventDefault()，stopPropagation()和return false。它们都没有阻止div点击冒泡到锚点并触发灯箱。

首先是我的翻转代码。 App.postImages只是jQuery图像锚点的缓存集合。我使用.add()来添加嵌入式视频容器。

rolloverShares: {
  divs: $('<div class="image-rollover rollover-facebook">Facebook</div><div class="image-rollover rollover-twitter">Twitter</div>'),

  init: function() {
    var _this = this;
    App.postImages.add('.embed-container', '#content-wrapper').hover(
      function() {
        _this.divs.prependTo($(this)).show();
      },
      function() {
        $('div', this).remove();
      }
    );

    $(document).on('click', '.rollover-facebook', function() {
      Social.facebook.popup();
      return false;
    });

    $(document).on('click', '.rollover-twitter', function() {
      Social.twitter.popup();
      return false;
    });
  }
},

这是我的灯箱代码。没有什么花哨。如果重要的话，下面某个栏中的.on()会让您点击灯箱上的任意位置来关闭它，而不仅仅是图片。

lightbox: function() {
  if (isDesktop) {
    App.postImages.nivoLightbox({
      effect: 'fade', 
      theme: 'default',
      keyboardNav: false,
      clickOverlayToClose: true,
      errorMessage: 'The requested image cannot be loaded. Please try again later.'
    });
    $(document).on('click', '.nivo-lightbox-image img', function() {
      $(this).closest('.nivo-lightbox-overlay').find('.nivo-lightbox-close').click();
    });
  } else {
    App.postImages.click(function(e) {
      e.preventDefault();
    });
  }
},

我想我应该把App.postImages中的内容放进去。就是这样：

$('a img', '#content-wrapper').not('.share-button img').parent().addClass('post-image')

使用.on（）返回false，仍在传播

0 个答案: