"Требовать сбой другого распознавателя".

78
9

Я пытаюсь настроить слайд-шоу с помощью жестов молотка. Я хотел бы перейти к следующему слайду на кране и вернуться к предыдущему по двойному касанию.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я запускаю событие с двойным нажатием, сразу же запускается одно событие крана.

Это мои соответствующие части кода:

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

на двойном кране

1
0
0
1

Однако преобразование стиля слайд-шоу согласуется с запуском функции prevSlide.

Почему функция nextSlide работает, хотя я использую требование сбоя? Что я здесь делаю неправильно? Спасибо за вашу помощь

спросил(а) 2018-08-02T19:43:00+03:00 2 года, 11 месяцев назад
0
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема