«
»

スマートフォンのtouchendのpageX

あーーーー

JavaScript

jQuery(function($){
    var t = $("#test"),s = $("#start"),m = $("#move"),e = $("#end");
   
    t.on("touchstart",touchStartEvent);
    t.on("touchmove",touchMoveEvent);
    t.on("touchend",touchEndEvents);
   
    s.html("start : " + 0);
    m.html("move : " + 0);
    e.html("end : " + 0);
   
    function touchStartEvent(evt){
        evt.preventDefault();
        s.html("start : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchMoveEvent(evt){
        evt.preventDefault();
        m.html("move : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchEndEvents(evt){
        evt.preventDefault();
        e.html("end : " + evt.originalEvent.touches[0].pageX);
    }
});

html

<div id="test" style="background:#CCC;padding:200px 0;">
<h1 style="text-align:center;">touch me</h1>
</div>
<p id="start"></p>
<p id="move"></p>
<p id="end"></p>

[touchend]だけ、数値が取れてない…

[touchend]のプロパティ見たら…pageXは「0」！

ゴニョゴニョとプロパティ値を探っていくと、［changedTouches］のlengthが「1」ってなってなってたから、中身を見てみると、あった、あったよ！pageX！

ってことで

JavaScript修正

jQuery(function($){
    var t = $("#test"),s = $("#start"),m = $("#move"),e = $("#end");
   
    t.on("touchstart",touchStartEvent);
    t.on("touchmove",touchMoveEvent);
    t.on("touchend",touchEndEvents);
   
    s.html("start : " + 0);
    m.html("move : " + 0);
    e.html("end : " + 0);
   
    function touchStartEvent(evt){
        evt.preventDefault();
        s.html("start : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchMoveEvent(evt){
        evt.preventDefault();
        m.html("move : " + evt.originalEvent.touches[0].pageX);
    }
   
    function touchEndEvents(evt){
        evt.preventDefault();
        e.html("end : " + evt.originalEvent.changedTouches[0].pageX); //ここを修正したのです。
    }
});

ああ、取れてる…ってことでした～

ちなみにｊQueryなしの場合は

window.onload = function(){
    var d = document,
    t = d.getElementById("test"),
    s = d.getElementById("start"),
    m = d.getElementById("move"),
    e = d.getElementById("end");
   
    t.addEventListener("touchstart",touchStartEvent,false);
    t.addEventListener("touchmove",touchMoveEvent,false);
    t.addEventListener("touchend",touchEndEvents,false);
   
    s.innerHTML = "start : " + 0;
    m.innerHTML = "move : " + 0;
    e.innerHTML = "end : " + 0;
   
    function touchStartEvent(evt){
        evt.preventDefault();
        s.innerHTML = "start : " + evt.touches[0].pageX;
    }
   
    function touchMoveEvent(evt){
        evt.preventDefault();
        m.innerHTML = "move : " + evt.touches[0].pageX;
    }
   
    function touchEndEvents(evt){
        evt.preventDefault();
        e.innerHTML = "end : " + evt.changedTouches[0].pageX;
    }
};

若干eventの中身が違うのねん～

 

This entry was posted on 水曜日, 12月 28th, 2011 at 2:05 PM and is filed under JS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.