前に諦めたけど、再挑戦(前：HTMLでフリックキーボードを作ろうとして、mouseupとtouchendの挙動の違いを知った | while(isプログラマ))。
先日、HTML5デザイン 仕事のネタ帳という本を読んでいたら『document.elementFromPoint』という記述がありました。どうやら、引数に座標を指定することにより、その座標位置にある要素を返してくれるようです(参考：document.elementFromPoint – DOM | MDN)。上記の本では座標をウェブページ座標(pageX,pageY)としていたのですが、どうもクライアント座標(clientX,clientY)が正しそうです。ただ、ブラウザによって挙動が違うようなので、間違いというわけではないかもしれません(参考：要素が画面上に見えているかどうかを調べる – by edvakf in hatena)。
というわけで以下、作ってみたフリックキーボードのJavaScript部分とサンプルページのリンク
var isTouch = ((typeof window.ontouchstart) !== 'undefined');
var touchStart = isTouch ? 'touchstart' : 'mousedown';
var touchEnd = isTouch ? 'touchend' : 'mouseup';
$('.flick-median').on(touchStart, function(e){
e.preventDefault();
console.log("touchStart");
$(this).nextAll().show();
});
$('.flick-list li').on(touchEnd, function(e){
e.preventDefault();
var thisX, thisY;
thisX = e.clientX || e.originalEvent.changedTouches[0].clientX;
thisY = e.clientY || e.originalEvent.changedTouches[0].clientY;
console.log(e);
console.log("touchEnd");
console.log(this);
var $select = $(document.elementFromPoint(thisX,thisY));
if( $select.is( $(this).parent().children() ) ){
var inputVal =$('#flickInput').val() + $select.html();
$('#flickInput').val(inputVal)
}
$(this).parent().children(':not(.flick-median)').hide();
});
サンプルページ：フリックキーボード
23行目で、取得した要素が、touchendが発動した要素の自分自身を含む兄弟要素か確かめてます。濁点と半濁点の処理はちゃんとやってませんが、フリックキーボードらしくなってるかと。使いドコロとしては、例えば、スマホサイトにおいて、絶対ひらがなしか入力させたくない場面なんかにいいかもしれません。そんな例がどれぐらいあるか分かりませんが。
コメント