jQuery与寻呼机里面div div与点击事件 - 无法停止传播

Question

我使用jQuery同位素插件。在每一个可点击（最大化/最小化）同位素元件，我有像

$('.slideshow.mainview').each(function() { 

    var $pager = $('<div class="pager"></div>').insertAfter(this); // creates a pager for each slideshow 

    $(this).cycle({ 
     speed: 300, 
     timeout: 0, 
     pager: $pager, 
     pagerEvent: 'click', 
     allowPagerClickBubble: false 
    }); 

}); 

点击寻呼机链路上产生的一个周期的jQuery幻灯片关闭同位素元件，因此不能看到下一幻灯片:(如何如果我使用'mouseover'作为pagerEvent，它可以工作，但幻灯片闪烁两次，所以这不是一个简单的方法而且 - 鼠标悬停在屏幕手机和平板设备上不起作用...

Answer 1

啊，很容易，一个必须NOT通过单击事件注册同位素元素（.item） - 但只是其他任何元素 - 按钮，div，无论 - 为了接收关闭点击事件（如果没有添加自动关闭，如下）。然后，每个同位素.item中的所有其他元素 - 幻灯片播放器，不管 - 都可以注册点击，因为它们的事件不会再冒泡到.item并过早关闭它。:)

$(document).ready(function() { 

var $container = $('#container'); 

$container.isotope({ 
    itemSelector: '.item', 
    masonry: { 
     columnWidth: 256 
    } 
}); 

$items = $('.item'); // to be able to reference methods on every .item 

$('.header').click(function() { // do not register the .item as usual, but any other element within it 

    var $previousSelected = $('.selected'); // necessary for switching 

    if ($(this).parent().hasClass('selected')) { // now, we have to use $(this).parent() because .header is inside .item 

    $items.find('.minimised, .header').removeClass('transparent'); // makes all divs .minimised opaque after an .item is closed again 

     $(this).parent().removeClass('selected'); 
     $(this).parent().children('.maximised').hide(); 
     $(this).parent().children('.minimised').show(); 

    } else { 

    $items.not(this).parent().find('.minimised, .header').addClass('transparent'); // makes all divs .minimised transparent while (this) is opened 

     $previousSelected.removeClass('selected'); 
     $previousSelected.children('.minimised').show(); 
     $previousSelected.children('.maximised').hide(); 

     $(this).parent().addClass('selected'); 
     $(this).parent().children('.minimised').hide(); 
     $(this).parent().children('.maximised').show(); 

    } 

    $container.isotope('reLayout'); 
}); 

});