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);
});
});
});
意外と簡単に動くようになって良かったです。
タッチイベントを使用するときは気をつけなければ、ですね。
