Question

我在幻灯片阵列中有多个页面数据，单个滑动在6.0（Marshmallow）版本和更高版本上注册为两个滑动。我已经尝试过这些jquery方法，但仍会触发两次。

event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();

处理滑动功能的代码，

                var wrap = jQuery('.slides_wrap'),
                slides = wrap.find('.img_slide'),
                active = slides.filter('.active'),
                i = slides.index(active),
                width = wrap.width();

聆听幻灯片上的滑动事件，并使用自定义“激活”＃39;要添加和删除课程的活动＆＃39;有效＆＃39;到上一张或下一张幻灯片，并使索引保持最新。课程“活跃”。使用CSS过渡来移动幻灯片。

            slides

            .on('swipeleft', function(e) {
                if (i === slides.length - 1) { return; }
                //alert("swipeleft");
                e.stopImmediatePropagation();
                slides.eq(i + 1).trigger('activate');
            })

            .on('swiperight', function(e) {
                if (i === 0) { return; }
                e.stopImmediatePropagation();
                slides.eq(i - 1).trigger('activate');
            })

            .on('activate', function(e) {
                slides.eq(i).removeClass('active');

                jQuery(e.target).addClass('active');

                // Update the active slide index
                i = slides.index(e.target);
                activeSlide = i;
            })

下面的代码处理触发任何滑动事件之前发生的事情。它使得此页面上的幻灯片演示工作得很好，但实际上与演示滑动事件本身并没有多大关系。有关移动事件的更多信息，请参阅：http://stephband.info/jquery.event.move

            .on('movestart', function(e) {
            //alert("movestart");

                // If the movestart heads off in a upwards or downwards
                // direction, prevent it so that the browser scrolls normally.
                if ((e.distX > e.distY && e.distX < -e.distY) ||
                    (e.distX < e.distY && e.distX > -e.distY)) {
                    e.stopImmediatePropagation();
                    e.preventDefault();

                    return;
                }

                // To allow the slide to keep step with the finger,
                // temporarily disable transitions.
                wrap.addClass('notransition');
            })


            .on('move', function(e) {
                var left = 100 * e.distX / width;
                //alert("move");
                // Move slides with the finger
                if (e.distX < 0) {
                    if (slides[i]) {
                        slides[i].style.left = left + '%';
                        slides[i+1].style.left = (left+100)+'%';
                    }
                    else {
                        slides[i].style.left = left/4 + '%';
                    }
                }
                if (e.distX > 0) {
                    if (slides[i]) {
                        slides[i].style.left = left + '%';
                        slides[i-1].style.left = (left-100)+'%';
                    }
                    else {
                        slides[i].style.left = left/5 + '%';
                    }
                }
            })

            .on('moveend', function(e) {
                wrap.removeClass('notransition');

                slides[i].style.left = '';

                if (slides[i+1]) {
                    slides[i+1].style.left = '';
                }
                if (slides[i-1]) {
                    slides[i-1].style.left = '';
                }
            });

HTML代码

 <div class="site_wrap wrap">
        <div class="img_slides_wrap slides_wrap wrap" id="contentDiv">
            <div class="pagination cent col-xs-12"></div>
        </div>
    </div>

Answer 1

实际上swipeleft和swiperight正在调用两次，三次（在最新的jquery lib中）， .hasClass（）会阻止多次调用相同的函数。

.on('swipeleft', function(e) {
                    if($(this).hasClass('active')) {
                        if (i === slides.length - 1) { return; }
                        slides.eq(i + 1).trigger('activate');
                        swipeFlag = false;
                    }
                })

                .on('swiperight', function(e) {
                    if($(this).hasClass('active')) {
                        if (i === 0) { return; }
                        slides.eq(i - 1).trigger('activate');
                        swipeFlag = false;
                    }
                })

在jQuery Cordova Android中触发了两次滑动事件

1 个答案: