mousedown和touchstart未在移动设备上注册

时间：2018-09-13 12:29:40

标签： javascript jquery touchstart

我已经创建了以下简单的图像比较滑块-modified from the version on w3schools（我知道使用他们的代码的错误）。

这一切在台式机上都可以正常工作，但是当我尝试在移动设备上使用它时，什么也没发生-甚至没有在console.log上注册mousedown / touchstart（当我用手指按下滑块按钮时）。

我想知道是否有人可以发现什么不明显的原因，为什么它不能在移动设备上工作

(() => {
  $.fn.imageComparisonSlider = function() {
    var returnValue = this.each((index, item) => {
      var $container = $(this);
      var $overlay = $container.find('.image-comparison-slider__bottom-image');
      var $slider = $('<span class="image-comparison-slider__slider"></span>');
      var $window = $(window);

      var touchStarted = false;
      var width = $container.outerWidth();

      $container.prepend($slider);

      $container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
        event.preventDefault();
        console.log('touchstart');
        touchStarted = true;
      });

      $window.on("mousemove touchmove", windowEvent => {
        if (touchStarted) {
          // get the cursor's x position:
          let pos = getCursorPos(windowEvent);

          // prevent the slider from being positioned outside the image:
          if (pos < 0) pos = 0;
          if (pos > width) pos = width;

          // execute a function that will resize the overlay image according to the cursor:
          slide(pos);
        }
      });

      $window.on('mouseup touchend', event => {
        event.preventDefault();
        touchStarted = false;
      });

      function getCursorPos(e) {
        var thisEvent = e || window.event;

        // calculate the cursor's x coordinate, relative to the image
        return thisEvent.pageX - $container.offset().left;
      }

      function slide(x) {
        // set the width of the overlay
        $overlay.width(width - x);

        // position the slider
        $slider[0].style.left = x + 'px';
      }

      function resetSlider() {
        $overlay.width('50%');
        $slider[0].style.left = $overlay.width() + 'px'
        width = $container.outerWidth();
      }
    });

    return returnValue;
  };
})($);


$('.image-comparison-slider__container').imageComparisonSlider();
.image {
  display: block;
  width: 100%;
}

.image-comparison-slider__title {
  text-align: center;
}

.image-comparison-slider__container,
.image-comparison-slider__image-holder {
  position: relative;
}

.image-comparison-slider__bottom-image {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 50%;
}

.image-comparison-slider__caption {
  position: absolute;
  padding: 1rem;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
  white-space: nowrap;
}

.image-comparison-slider__top-image .image-comparison-slider__caption {
  top: 0;
  left: 0;
}

.image-comparison-slider__bottom-image .image-comparison-slider__caption {
  bottom: 0;
  right: 0;
}

.image-comparison-slider__image {
  display: block;
  z-index: 1;
}

.image-comparison-slider__bottom-image .image {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
}

.image-comparison-slider__slider {
  position: absolute;
  z-index: 3;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 50px;
  height: 50px;
  background-color: rgba(255, 96, 38, 0.8);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
}

.image-comparison-slider__slider:after {
  content: "< >";
  color: white;
  font-weight: bold;
  font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
  <div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
    <img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
    <div class="image-comparison-slider__caption">Left Image</div>
  </div>
  <div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
    <img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
    <div class="image-comparison-slider__caption">Right Image</div>
  </div>
</div>

Fiddle link for code

1 个答案:

答案 0 :(得分：0)

好吧，我们设法解决了这个问题-由于转换，触摸没有注册，所以我改变了这一点，因为按钮的尺寸固定，所以只使用了负边距。

然后，我不得不为Android修复thisEvent.pageX-用isNaN进行检查，如果正确，则将其设置为e.originalEvent.touches[0].pageX。

工作版本：

(() => {
  $.fn.imageComparisonSlider = function() {
    var returnValue = this.each((index, item) => {
      var $container = $(this);
      var $overlay = $container.find('.image-comparison-slider__bottom-image');
      var $slider = $('<span class="image-comparison-slider__slider"></span>');
      var $window = $(window);

      var touchStarted = false;
      var width = $container.outerWidth();

      $container.prepend($slider);

      $container.on('mousedown touchstart', '.image-comparison-slider__slider', event => {
        event.preventDefault();
        console.log('touchstart');
        touchStarted = true;
      });

      $window.on("mousemove touchmove", windowEvent => {
        if (touchStarted) {
          // get the cursor's x position:
          let pos = getCursorPos(windowEvent);

          // prevent the slider from being positioned outside the image:
          if (pos < 0) pos = 0;
          if (pos > width) pos = width;

          // execute a function that will resize the overlay image according to the cursor:
          slide(pos);
        }
      });

      $window.on('mouseup touchend', event => {
        event.preventDefault();
        touchStarted = false;
      });

      function getCursorPos(e) {
        var thisEvent = e || window.event;

        let xVal = thisEvent.pageX;
        
        if (isNaN(xVal)) {
          xVal = e.originalEvent.touches[0].pageX;
        }
        
        // calculate the cursor's x coordinate, relative to the image
        return xVal - $container.offset().left;
      }

      function slide(x) {
        // set the width of the overlay
        $overlay.width(width - x);

        // position the slider
        $slider[0].style.left = x + 'px';
      }

      function resetSlider() {
        $overlay.width('50%');
        $slider[0].style.left = $overlay.width() + 'px'
        width = $container.outerWidth();
      }
    });

    return returnValue;
  };
})($);


$('.image-comparison-slider__container').imageComparisonSlider();
.image {
  display: block;
  width: 100%;
}

.image-comparison-slider__title {
  text-align: center;
}

.image-comparison-slider__container,
.image-comparison-slider__image-holder {
  position: relative;
}

.image-comparison-slider__bottom-image {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 50%;
}

.image-comparison-slider__caption {
  position: absolute;
  padding: 1rem;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
  white-space: nowrap;
}

.image-comparison-slider__top-image .image-comparison-slider__caption {
  top: 0;
  left: 0;
}

.image-comparison-slider__bottom-image .image-comparison-slider__caption {
  bottom: 0;
  right: 0;
}

.image-comparison-slider__image {
  display: block;
  z-index: 1;
}

.image-comparison-slider__bottom-image .image {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
}

.image-comparison-slider__slider {
  position: absolute;
  z-index: 3;
  cursor: ew-resize;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 96, 38, 0.8);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -25px 0 0 -25px;
}

.image-comparison-slider__slider:after {
  content: "< >";
  color: white;
  font-weight: bold;
  font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-comparison-slider__container">
  <div class="image-comparison-slider__image-holder image-comparison-slider__top-image">
    <img src="https://www.fillmurray.com/g/400/300" alt="A test image 1" class="image">
    <div class="image-comparison-slider__caption">Left Image</div>
  </div>
  <div class="image-comparison-slider__image-holder image-comparison-slider__bottom-image">
    <img src="https://www.fillmurray.com/400/300" alt="A test image 2" class="image">
    <div class="image-comparison-slider__caption">Right Image</div>
  </div>
</div>

相关问题
最新问题