Цикл jQuery с пейджером внутри div с событиями кликов - не может остановить распространение

Я использую плагин jQuery Isotope. В каждом кликабельном (максимизирующем/минимизирующем) элементе Isotope у меня создается одно слайд-шоу jQuery Cycle, например

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

});

Нажатие на ссылку пейджера закрывает элемент Isotope, поэтому следующий слайд не виден :( Как я могу остановить распространение щелчка пейджера на родительский элемент (элемент Isotope)? Любые советы очень ценятся!

ps: если я использую «mouseover» как pagerEvent, это работает; но слайды мерцают дважды. Так что это тоже не простой выход. И - наведение мыши не работает на экранных телефонах и планшетах...


events event-propagation jquery-cycle
person Systembolaget    schedule 23.07.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ах, легко. Нужно НЕ регистрировать элемент Isotope (.item) с событием клика, а просто любой другой элемент ВНУТРИ его — кнопку, div, что угодно — чтобы для получения события закрытия щелчка (если не добавлено автоматическое закрытие, как показано ниже). Затем все остальные элементы внутри каждого Isotope .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');
});

});
person Systembolaget    schedule 23.07.2012