jQuery點擊移動問題（滑塊）

Question

我編寫了一個小腳本，用於在移動設備上的垂直畫廊中滾動 - 在瀏覽器中一切正常，但我無法使其在我的智能手機上工作。我究竟做錯了什麼？

這就是我的查詢：

jQuery('.single-cinema-cat .next').on('click touchstart', function() { 
    alert("The btn was clicked."); 
    if(jQuery(this).hasClass('disabled')) 
     return; 
    jQuery(this).addClass('disabled'); 

    var $el = jQuery(this); 
    if(jQuery(window).innerWidth() >= 970) 
     scrollVertical_next($el); 
    else 
     scrollHorizontal_next($el); 
}); 

點擊元素在我的HTML標記的跨度元素 - 這會是一個問題嗎？我的標記的截圖：https://picload.org/image/ralwaarg/jquerymobile.png

請救我要進一步頭痛:-)

scrollVertical_next

function scrollVertical_next($el) { 
var $wrapper = $el.closest('.single-cinema-cat').find('.inner'); 
var margin = parseInt($wrapper.find('article').css('margin-bottom')) + parseInt($wrapper.find('article').css('margin-top')); 
var current_height = parseInt($wrapper.find('ul').css('top')); 
var single_height = $wrapper.find('article').outerHeight() + margin; 
var target_height = current_height - single_height; 
var total_height = $wrapper.find('ul').innerHeight(); 
var stopper_height = -1 * total_height + 4 * single_height; 
if (target_height < stopper_height) 
    return; 
$wrapper.find('ul').animate({ 
    'top': target_height + 'px' 
}, 250, 'swing', function() { 
    if (target_height > stopper_height) 
     $el.removeClass('disabled'); 
    $el.closest('.single-cinema-cat').find('.prev').removeClass('disabled'); 
}); 

}

scrollHorizo​​ntal_next

function scrollHorizontal_next($el) { 
var $wrapper = $el.closest('.single-cinema-cat').find('.inner'); 
var margin = parseInt($wrapper.find('article').css('margin-bottom')) + parseInt($wrapper.find('article').css('margin-top')); 
var current_height = parseInt($wrapper.find('ul').css('top')); 
var single_height = $wrapper.find('article').outerHeight() + margin; 
var target_height = current_height - single_height; 

var total_height = $wrapper.find('ul').innerHeight(); 
var stopper_height = -1 * total_height + 1 * single_height; 
if (target_height < stopper_height) 
    return; 

$wrapper.find('ul').animate({ 
    'top': target_height + 'px' 
}, 250, 'swing', function() { 
    if (target_height > stopper_height) 
     $el.removeClass('disabled'); 
    $el.closest('.single-cinema-cat').find('.prev').removeClass('disabled'); 
}); 

}

Answer 1

觸摸事件必須這樣處理

jQuery('.single-cinema-cat .next').on('click touchstart', function (event) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     if (event.handled !== true) { 

    ////////// your stuff ////////////////////////// 


      alert("The btn was clicked."); 
      if (jQuery(this).hasClass('disabled')) 
       return; 
      jQuery(this).addClass('disabled'); 

      var $el = jQuery(this); 
      if (jQuery(window).innerWidth() >= 970) 
       scrollVertical_next($el); 
      else 
       scrollHorizontal_next($el); 

    //////////////////////////////////////////////////// 

      event.handled = true; 
     } else { 
      return false; 
     } 
});