jQuery循环与pager里面的div与点击事件 - 不能停止传播 [英] jQuery cycle with pager inside div with click events - can't stop propagation

问题描述

我正在使用jQuery Isotope插件。在每个可点击（最大化/最小化）同位素元素中，我有一个jQuery循环幻灯片生成，如

  $（'。slideshow .mainview'）。each（function（）{
 
 var $ pager = $（'< div class =pager>< / div>'）insertAfter（this）; / /每个幻灯片创建一个寻呼机
 
 $（this）.cycle（{
 speed：300，
 timeout：0，
 pager：$ pager，
 pagerEvent：'click'，
 allowPagerClickBubble：false 
}）; 
 
}）; 
  

点击寻呼机链接关闭同位素元素，所以看不到下一张幻灯片:(如何停止寻呼机点击传播到父（同位素元素）？任何建议非常感谢！

ps：如果我使用mouseover作为pagerEvent，它的工作原理;但是幻灯片闪烁两次，所以这不是简单的方法，而且 - 鼠标悬停不能在屏幕手机和平板电脑上工作...

解决方案不注册同位素元素（.item）一个点击事件 - 只是其他元素 INSIDE 按钮，一个div，无论如何 - 为了接收关闭点击事件（如果没有添加自动关闭，如下所示），然后，每个Isotope.item中的所有其他元素 - 幻灯片寻呼机，无论如何 - 可以注册被点击，因为他们的事件将不再冒泡到.item并提前关闭：）

  $（document）.re ady（function（）{
 
 var $ container = $（'＃container'）; 
 
 $ container.isotope（{
 itemSelector：'.item'，
 masonry：{
 columnWidth：256 
} 
}） ; 
 
 $ items = $（'。item'）; //可以引用每个.item 
 
 $（'。header'）上的方法。click（function（）{//不要像往常一样注册.item，而是在它
 
 var $ previousSelected = $（'。selected'）; //需要切换
 
 if（$（this）.parent（）。hasClass（'selected' ））{//现在，我们必须使用$（this）.parent（），因为.header在里面.item 
 
 $ items.find（'。minimize，.header'）removeClass '透明'）; //使所有div.minimised不透明.item再次关闭后
 
 $（this）.parent（）。removeClass（'selected'）; 
 $（这个）.parent（）。children（'。maximized'）。hide（）; 
 $（this）.parent（）。children（'。minimize'）。show（）; 
 
} else {
 
 $ items.not（this）.parent（）。find（'。minimize，.header'）。addClass（'transparent'）; //使所有div.minimised透明（打开）
 
 $ previousSelected.removeClass（'selected'）; 
 。$ previousSelected.children（最小化）显示（）; 
 $ previousSelected.children（'。maximized'）。hide（）; 
 
 $（this）.parent（）。addClass（'selected'）; 
 $（this）.parent（）。children（'。minimize'）。hide（）; 
 $（this）.parent（）。children（'。maximized'）。show（）; 
 
} 
 
 $ container.isotope（'reLayout'）; 
}）; 
 
}）; 
  

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...

解决方案

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

});

这篇关于jQuery循环与pager里面的div与点击事件 - 不能停止传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！