iOS 8.4.1でのSafariでリンクを2回タップしないと反応しないの解決策

@iwasaki 451views 更新:2015年9月25日

以前 http://hacknote.jp/archives/13708/ でお伝えした現象ですが、新たにこういうことが判明しました。

最後の2つの例のように ‘body’ や document をルート要素としてイベントを登録すると、iOS では動かないんです。

http://qiita.com/38kun/items/ce6a26c9c59612e6f515 より引用

ということでもしbodyやdocumentに対してイベントの登録を行っているようであれば、変更を行う必要があります。

対策1:bodyに設定していたイベントを修正する

dojo.connect(dojo.query('body')[0], 'onmousedown', null, function(){

dojo.connect(dojo.byId('wrapper'), 'onmousedown', null, function(){

などのようにして対応します。

対策2:タッチイベントの際にクリック動作を呼ぶように変更する

aタグを装飾しまくっている場合には動作しなかったので、touchstartイベントの際にクリックの動作もしてしまうようにします。

onmouseoverイベントが定義されているとtouchstartイベントと2重でイベントが走ってしまうようなので、除外をしておきます。

        dojo.query('a').forEach(function(element) {
        var handle = dojo.connect(element, 'ontouchstart', null, function(){
            var link = this.getAttribute("href");
            var onclick = this.getAttribute("onclick");
            var onmouseover = this.getAttribute("onmouseover");
            var target = this.getAttribute("target");
            var linktype = link.substring(0,1);
            if (onclick != null && onmouseover == null) {
              this.onclick();
              dojo.disconnect(handle);
            }
            if(linktype != "#" && link.indexOf('javascript:void') != -1){
                if(target == "_blank"){
                    window.open(link);
                } else{
                    location.href = link;
                }
            }
          });
        });

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません