2016/02/09

[iOS9][JavaScript][mobile safari][jQuery]Force Touchについて

Force Touchを搭載したiPhoneでJavaScriptを使って感圧タッチを取得することはできないのだろうか?

WebKit DOM Programming TopicsのResponding to Force Touch Eventsを見ながら下のように組みました。

<script>
jQuery(function($){
  var $button = $('._button');
  $button.on('webkitmouseforcewillbegin',function(e){
    alert('webkitmouseforcewillbegin');
  });

  $button.on('webkitmouseforcedown',function(e){
    alert('webkitmouseforcedown');
  });

  $button.on('webkitmouseforceup',function(e){
    alert('webkitmouseforceup');
  });

  $button.on('webkitmouseforcechanged',function(e){
    alert('webkitmouseforcechanged');
  });
});
</script>
<button type="button" class="_button">Button</button>
が、しかし、全然動かない。

で、さらに検索をかけてみると、
iOS9で追加されたForceTouch(3DTouch)をJavaScriptで操作してみる

iOS 9 Mobile Safari was enabled force touch event
のエントリーでも同じ悩みを抱えたらしく、結果的に、下のようにforceプロパティーで解決したそうです。
$button.on('touchmove',function(event){
  console.log(event.originalEvent.touches[0].force);
});

0 コメント:

コメントを投稿