Question

我正在尝试使用锤子手势设置幻灯片。我想在点击时移至下一张幻灯片，在双击时移回到上一张。

我遇到的问题是，当我触发双击事件时，此后立即运行一次单击事件。

这些是我相关的代码部分：

ffunction addTouch(ssClassName){
var tSs = {};
var slideshows = document.getElementsByClassName(ssClassName);
for(let i=0;i<slideshows.length;i++){
    for(let j=0;j<slideshows[i].getElementsByTagName('img').length;j++){
        slideshows[i].getElementsByTagName('img')[j].setAttribute('draggable', false);
    }
    slideshows[i].dataset.touchnumber = i;
    tSs[i] = {
    // reference to the actual slideshow div
    div: slideshows[i],
    // instance of Hammer for touch controls
    mc: new Hammer(slideshows[i]),
    // object to contain transform 3d
    transform: retCurTransform(slideshows[i]),
    // current style
    startingT: retCurTransform(slideshows[i]),
    timer: undefined,
    ticking: false,
    currentSlideN: 0,
    slidesMax: slideshows[i].getElementsByClassName('slide2').length,
    dXpct: 100/parseInt(slideshows[i].getElementsByClassName('slide2').length, 10),
    openable: slideshows[i].classList.contains('as-fullscreen-slideshow') ? true : false,
    open: slideshows[i].classList.contains('as-fullscreen-slideshow') ? false : undefined
    }
}
    return {
        slideshowsN: function(){
            return slideshows.length
        },
    openSlide: function(i, slideN){
        if(tSs[i].openable == true && tSs[i].open == false){
          tSs[i].currentSlideNN = slideN
          tSs[i].transform.tX = translateSs(slideN, tSs[i].dXpct)
          requestElementUpdate(tSs[i], tSs[i].transform)
          tSs[i].div.parentNode.classList
        }
    },
        addPan: function(i){
            tSs[i].mc.on("panleft panright tap press", function(ev) {
            // pan slideshow along X when holding pressed on the element
            if(!tSs[i].ticking){
              let offsetwidth = parseInt(tSs[i].div.offsetWidth,10);
              let deltaX = parseInt(ev.deltaX,10)
              let percentageRatio = deltaX/offsetwidth*100;
              tSs[i].transform.tX = parseFloat(tSs[i].startingT.tX) + parseFloat(percentageRatio);
              tSs[i].transform.tY = tSs[i].startingT.tY;
              requestElementUpdate(tSs[i], tSs[i].transform);
              };
            });
            tSs[i].mc.on("panend rotateend pinchend pancancel rotatecancel pinchcancel", function(ev){
                resetElementEnd(tSs[i])
            });
        },
        addSwipe: function(i){
            tSs[i].mc.add(new Hammer.Swipe()).recognizeWith(tSs[i].mc.get('pan'));
            tSs[i].mc.on("swiperight", function(){
                prevSlide(tSs[i])
            }); 
            tSs[i].mc.on("swipeleft", function(){
                nextSlide(tSs[i])
            }); 
            tSs[i].mc.on("swipeup", function(){
                closeSlideshow(tSs[i])
            }); 
            tSs[i].mc.on("swipedown", function(){
                closeSlideshow(tSs[i])
            }); 
        },
        addTap: function(i){
            tSs[i].mc.add(new Hammer.Tap({ event: 'tap' }).requireFailure(tSs[i].mc.get('doubletap')));

            tSs[i].mc.on( "tap", function(){
                nextSlide(tSs[i]);
                resetElementEnd(tSs[i]);
            });
        },
        addDblTap: function(i){
            tSs[i].mc.add(new Hammer.Tap({ event: 'doubletap', taps: 2 }).recognizeWith(tSs[i].mc.get('tap')));
            tSs[i].mc.on("doubletap", function(){
                prevSlide(tSs[i]);
                resetElementEnd(tSs[i]);
            });
        }
}

}

这是我将重击事件添加到幻灯片的方式。函数prevSlide和nextSlide如下：

function nextSlide(slideshow) {
if(slideshow.currentSlideN < (slideshow.slidesMax-1)){
    console.log(slideshow.currentSlideN)
    slideshow.currentSlideN += 1;
    console.log(slideshow.currentSlideN)
    slideshow.startingT.tX = translateSs(slideshow.currentSlideN, slideshow.dXpct);
}
}

function prevSlide(slideshow) {
if(slideshow.currentSlideN > 0){
    console.log(slideshow.currentSlideN)
    slideshow.currentSlideN -= 1;
    console.log(slideshow.currentSlideN)
    slideshow.startingT.tX = translateSs(slideshow.currentSlideN, slideshow.dXpct);
    }
}

更新幻灯片样式的功能如下：

function resetElementEnd(element){

if(!element.ticking){
    toggleTicking(element);
    toggleAnimating(element.div);
  requestElementUpdate(element, element.startingT);
  setTimeout(function(){
        toggleTicking(element);
        toggleAnimating(element.div);
    }, 310);
    }
}

function requestElementUpdate(element, elementT) {
reqAnimationFrame(function(){
updateElementTransform(element, elementT);
})
}

function updateElementTransform(element, elementT) {
    var value = [
        'translate(' + elementT.tX + '%, ' + elementT.tY + '%)',
        'scale(' + elementT.scaleX + ', ' + elementT.scaleY + ')',
        'rotate3d('+ elementT.rX +','+ elementT.rY +','+ elementT.rZ +','+  elementT.rAngle + elementT.rAngleUnit + ')'
    ];

    value = value.join(" ");
    element.div.style.webkitTransform = value;
    element.div.style.mozTransform = value;
    element.div.style.transform = value;
}

当我触发一次单击事件时，故障要求正常运行，因为该事件触发时稍有延迟，并正确执行nextSlide函数。但是，当我首先触发双击事件时，它会正确运行prevSlide函数，但在触发nextSlide函数后立即运行。 slideshow.currentSlideN的控制台输出如下：

点击：

0
1

双击

但是，幻灯片放映的样式转换与prevSlide函数的启用一致。

即使我使用失败要求，为什么nextSlide函数也运行？我在这里做错了什么？谢谢您的帮助

“需要其他识别器故障”双击将在其后触发单击

0 个答案: