JavaScript、iOS Safariでタッチ中の要素を調べる
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”になっています。
