jQuery cycle with pager inside div with click events - can't stop propagation

问题

I'm using the jQuery Isotope plugin. In each clickable (maximising/minimising) Isotope element, I'm having one jQuery Cycle slideshow generated like

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

});

Clicking on a pager link closes the Isotope element, so one can't see the next slide :( How can I stop pager click propagation to the parent (the Isotope element)? Any advice much appreciated!

ps: if I use 'mouseover' as pagerEvent, it works; but the slides flicker twice. So that's no easy way out either. And - mouseover don't work on screen phones and tablet devices...

回答1:

Ah, easy. One has to NOT register the Isotope element (.item) with a click event - but just any other element INSIDE of it - a button, a div, whatever - in order to receive the closing click event (if no auto-close is added, as below). Then, all other elements within each Isotope .item - slideshow pagers, whatever - can be registered to be clicked, because their events will no longer bubble up to the .item and close it prematurely :)

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

});

来源：https://stackoverflow.com/questions/11615578/jquery-cycle-with-pager-inside-div-with-click-events-cant-stop-propagation

标签

events

jquery-cycle

event-propagation