JavaScript、iOS Safariでタッチ中の要素を調べる

Posted by dab | 2012年5月7日 月曜日 13:48:49 < JavaScript, XCode, コンピュータ >

iPhoneでタッチ中の要素を調べるコード。

なんかうまく取得できない。
mobile Safariのバグのような気もするけど。

http://home.wi-wi.jp/lab/00w/
短縮URL http://cise.jp/A0017

<script type="text/javascript">
function preventBehavior(e) {
e.preventDefault();
};
function onBodyLoad(){
document.addEventListener("touchmove", preventBehavior, false);
document.body.addEventListener('touchmove', function(e){
var keys=[];
keys[0]=e.target.dataset.key;
keys[1]=(e.touches && e.touches[0])?e.touches[0].target.dataset.key:'';
keys[2]=(e.targetTouches && e.targetTouches[0])?e.targetTouches[0].target.dataset.key:'';
keys[3]=(e.changedTouches && e.changedTouches[0])?e.changedTouches[0].target.dataset.key:'';
output.innerHTML+=keys.join(',')+'<br>';
console.log(keys.join(', '));
}, false);
document.body.addEventListener('touchend', function(e){output.innerHTML='';}, false);
}
</script>
<body onload="onBodyLoad()">
<div>
<div data-key="a">abcde</div>
<div data-key="b">abcde</div>
<div data-key="c">abcde</div>
<div data-key="d">abcde</div>
<div data-key="e">abcde</div>
<div data-key="f">abcde</div>
<div data-key="g">abcde</div>
</div>
<div id="output"></div>
</body>

たとえば、dataset.key=aのところをタッチして、そのまま下までドラッグし、
指をdataset.key=cの場所に持っていく。

期待値は指の場所のkeyを取得できること、つまり”c”が表示されることですが、
実際に表示されるのは”a”になっています。

TrackBack URI : http://home.wi-wi.jp/blog/wp-trackback.php?p=883

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: