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'); 
}); 

});