如何在水平滚动时防止点击

如何解决如何在水平滚动时防止点击

我正在使用带有链接的卡片列表，它可以使用鼠标和箭头进行水平滚动。 我想在向左或向右滚动/拖动项目时防止点击（标签）。 但是如果我不拖动项目，点击应该可以工作。

这是我在 Javascript 中使用的内容。 代码

var instance = $(".hs__wrapper");
$.each( instance,function(key,value)
{
    var arrows = $(instance[key]).find(".arrow"),prevArrow = arrows.filter('.arrow-prev'),nextArrow = arrows.filter('.arrow-next'),Box = $(instance[key]).find(".hs"),x = 0,mx = 0,maxScrollWidth = Box[0].scrollWidth - (Box[0].clientWidth / 2) - (Box.width() / 2);

      $(arrows).on('click',function() {
          
        if ($(this).hasClass("arrow-next")) {
          x = ((Box.width() / 2)) + Box.scrollLeft() - 10;
          Box.animate({
            scrollLeft: x,})
        } else {
          x = ((Box.width() / 2)) - Box.scrollLeft() -10;
          Box.animate({
            scrollLeft: -x,})
        }
          
      });
    
  $(Box).on({
    mousemove: function(e) {
      var mx2 = e.pageX - this.offsetLeft;
      if(mx) this.scrollLeft = this.sx + mx - mx2;
    },mousedown: function(e) {
      this.sx = this.scrollLeft;
      mx = e.pageX - this.offsetLeft;
    },scroll: function() {
      toggleArrows();
    }
  });

  $(document).on("mouseup",function(){
    mx = 0;
  });
  
  function toggleArrows() {
    if(Box.scrollLeft() > maxScrollWidth - 10) {
        // disable next button when right end has reached 
        nextArrow.addClass('disabled');
      } else if(Box.scrollLeft() < 10) {
        // disable prev button when left end has reached 
        prevArrow.addClass('disabled')
      } else{
        // both are enabled
        nextArrow.removeClass('disabled');
        prevArrow.removeClass('disabled');
      }
  }

});

解决方法

尝试向链接添加单击事件处理程序，以防止滚动时出现默认浏览器行为。然后，删除事件处理程序，使用例如检测滚动停止的时间this method。

var instance = $(".hs__wrapper");
$.each( instance,function(key,value)
{
    var arrows = $(instance[key]).find(".arrow"),prevArrow = arrows.filter('.arrow-prev'),nextArrow = arrows.filter('.arrow-next'),box = $(instance[key]).find(".hs"),x = 0,mx = 0,maxScrollWidth = box[0].scrollWidth - (box[0].clientWidth / 2) - (box.width() / 2);

      $(arrows).on('click',function() {
          
        if ($(this).hasClass("arrow-next")) {
          x = ((box.width() / 2)) + box.scrollLeft() - 10;
          box.animate({
            scrollLeft: x,})
        } else {
          x = ((box.width() / 2)) - box.scrollLeft() -10;
          box.animate({
            scrollLeft: -x,})
        }
          
      });
    
  $(box).on({
    mousemove: function(e) {
      var mx2 = e.pageX - this.offsetLeft;
      if(mx) this.scrollLeft = this.sx + mx - mx2;
    },mousedown: function(e) {
      this.sx = this.scrollLeft;
      mx = e.pageX - this.offsetLeft;
    },scroll: function() {
      clearTimeout($.data(this,'scrollTimer'));
      $.data(this,'scrollTimer',setTimeout(function() {
         $(box).find('a').off('click');
      },250));

      toggleArrows();
      $(box).find('a').on('click',function(e) {
         e.preventDefault();
      });
    }
  });

  $(document).on("mouseup",function(){
    mx = 0;
  });
  
  function toggleArrows() {
    if(box.scrollLeft() > maxScrollWidth - 10) {
        // disable next button when right end has reached 
        nextArrow.addClass('disabled');
      } else if(box.scrollLeft() < 10) {
        // disable prev button when left end has reached 
        prevArrow.addClass('disabled')
      } else{
        // both are enabled
        nextArrow.removeClass('disabled');
        prevArrow.removeClass('disabled');
      }
  }

});