Question

我有类似内容滑块的功能，可以滚动浏览内容。在那个内容上，我只有几个按钮，这是一个问题。在台式机上一切正常，但是在触摸屏上我只能使用滑动，按钮不能交互。

我尝试使用一些基本概念，例如将z-index向上移至按钮或设置相对位置，但没有任何帮助。

在此网址上，您可以看到完整的项目https://parus.if.ua/plan-slider/index.html

JS代码：

  var autoAdjustHeight = true;

$('nav a').on('mousedown', function(e){
  e.preventDefault();
  var goTo = $(this).parent().index();  
  swipegoryUpdate(goTo);
});
$("ul.panes").swipe({
  swipeStatus:function(event, phase, direction, distance, duration, fingerCount) {    
    var translateString = 'translate3d(0px, 0px, 0px)';
    var transitionDuration = $('nav li.cur').css('transitionDuration');
    var speed = transitionDuration;    

    if(phase == 'move') {
      speed = '0ms';      
      if(direction == 'left') {
        translateString = 'translate3d(-' + distance + 'px, 0px, 0px)';
        $('.panes li.cur').css('marginLeft', '-'+ distance +'px');
      }
      else if(direction == 'right') {
        translateString = 'translate3d(' + distance + 'px, 0px, 0px)';
        $('.panes li.cur').css('marginLeft', distance +'px');
      }
      $('nav li.cur').css({ 
        transitionDuration: speed,
        transform: translateString
      });

    }
    else if (phase == 'end') {
      var marginLeft = $('nav li.cur').css('marginLeft');
      $('nav li.cur').attr('style', '').css('marginLeft', marginLeft);
      $('.panes li.cur').attr('style', '');
    }
  },
  swipeLeft:function(event, direction, distance, duration, fingerCount) {
    var goTo = $('nav li.cur').index();
    goTo++;
    swipegoryUpdate(goTo); 
  },
  swipeRight:function(event, direction, distance, duration, fingerCount) {
    //This only fires when the user swipes left
    var goTo = $('nav li.cur').index();
    goTo--;
    swipegoryUpdate(goTo); 
  },
  threshold: 50,
  triggerOnTouchEnd: false,
  allowPageScroll: "vertical",
  excludedElements: "button, input, select, textarea, .noSwipe"
});

$(window).load(function() {
  swipegoryUpdate(1);  
});

function swipegoryUpdate(goTo) {
  var listItems = $('nav li');
  var panes = $('.panes');
  var prev = goTo - 1;
  var next = goTo + 1;  
  if(goTo >= 0 && goTo < listItems.length) {   
    listItems.removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');
    $('li', panes).removeClass('prev').removeClass('cur').removeClass('next').removeClass('before').removeClass('after');

    listItems.each(function(i) {
      var li = $(this);
      var pane = $('li:eq('+i+')', panes);

      li.attr('style', '');

      if(i == prev) {
        li.addClass('prev');
        li.css('margin-left', '0');      
        pane.addClass('prev');
      }
      else if(i == next) {
        li.addClass('next');
        li.css('margin-left', '-' + li.outerWidth() + 'px');
        pane.addClass('next');
      }
      else if(i < goTo) {
        li.addClass('before');
        li.css('margin-left', '-' + li.outerWidth() + 'px');
        pane.addClass('before');
      }
      else if(i == goTo) {
        li.addClass('cur');
        var marginLeft = li.outerWidth() / 2;

        li.css('margin-left', '-' + marginLeft + 'px');
        pane.addClass('cur');

        if(autoAdjustHeight == true) {
          $('.swipegory').css('height', pane.outerHeight() + li.outerHeight());
        }

      }
      else if(i > goTo) {
        li.addClass('after');
        li.css('margin-left', '0');
        pane.addClass('after');
      }
    });    
  }
}

Answer 1

//测试是否支持触摸事件，如果不支持，请将.no-touch类附加到HTML标记。

浏览此link

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

滑动活动时的按钮

1 个答案: