読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

Androidでtouchイベントが効かない件

作業中にハマったのでメモ。
要素をスワイプした距離だけ動かすコードを書いたところ、Androidでは動きませんでした。
でもページを作ったのでとりあえず御覧ください。

この時のコードが以下のとおりです。

.block {
  background: #ffff00;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 200px;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
}
<div class="block js-touch"></div>
$(function() {

  $block = $('.js-touch');

  $block.each(function() {
    var $this = $(this);
    var currentY = parseInt($this.css('top'), 10);
    var minY = currentY;

    $this.on('touchstart', function(e) {
      currentY = e.originalEvent.changedTouches[0].pageY;
    });
    $this.on('touchend', function(e) {
      var endY = e.originalEvent.changedTouches[0].pageY;
      var distance = endY - currentY;

      $this.animate({ top: parseInt($this.css('top'), 10) + distance }, 400);
    });
  });

});

何故動かないのかを調べてみると、touchstartにpreventDefault()をしてあげると動くようになるらしい。
試してみたのが以下のコードになります。

$(function() {

  $block = $('.js-touch');

  $block.each(function() {
    var $this = $(this);
    var currentY = parseInt($this.css('top'), 10);
    var minY = currentY;

    $this.on('touchstart', function(e) {
      e.preventDefault();
      currentY = e.originalEvent.changedTouches[0].pageY;
    });
    $this.on('touchend', function(e) {
      var endY = e.originalEvent.changedTouches[0].pageY;
      var distance = endY - currentY;

      $this.animate({ top: parseInt($this.css('top'), 10) + distance }, 400);
    });
  });

});

意外と簡単に動くようになって良かったです。
タッチイベントを使用するときは気をつけなければ、ですね。

今回参考にしたページ