質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17518questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9567questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7108questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

スマートフォンにタップするとページ遷移ができない

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 190

Leon-Lionking

score 13

iPhone にタップすると何故か2回押さないとページ遷移してしまいます。

 前提・実現したいこと

実行したい内容
・iPhone タップ1回だけでページ遷移したい
・onMouseover を onTouchstart に切り替えると、タップ1回はページ遷移できますが、扉が開く動作が作動しません。

 他のサイトを見て試したこと

スマホでもPCと同じマウスオーバーの効果を与える方法|猫の手相

一部改変してあります。

var linkTouchStart = function(){
    thisAnchor = $(this);
    touchPos = thisAnchor.offset().top;
    moveCheck = function(){
        nowPos = thisAnchor.offset().top;
        if(touchPos == nowPos){
            thisAnchor.addClass("link");
        }
    }
    setTimeout(moveCheck,100);
}
var linkTouchEnd = function(){
    thisAnchor = $(this);
    hoverRemove = function(){
        thisAnchor.removeClass("link");
    }
    setTimeout(hoverRemove,500);
}

$(document).on('touchstart onmouseover','a',linkTouchStart);
$(document).on('touchend onmouseout','a',linkTouchEnd);

 該当のソースコード

javascript

(function($){
window.onload=function(){
    j=0; //角度
    wH=0; //立幅
    l=0; //onMouseover時にappendChildされた子要素が追加されると1、remove=0
    nameNode=0;//onmouseoverされているimg要素を特定、初期値は0
    o=0;
    id=["tap01","tap02","page03"];//のid
    value=[0.90,0.28,0.45]; //画像の位置の初期値
    value2=[0.35,0.50,0.35]; //画像の位置の初期値
    v = 1;//扉画像を切り替えるための変数
    var timer;
    element = new Array; //back_image()で使用、扉idを指定し、格納する配列
    ikan();
    back_image();
    open();
}

function open(){
    timer = setTimeout(function(){
        for(var i=1; i<8; i++){
            //var element = document.getElementById('element'+i);//扉idを指定し、読み込む
            element[i].style.display='none';//一度全てdisplay:none;を指定し、意図的に表示させない
        }
        imageP = document.getElementById('element'+v);//切り替えるための変数を添え字として、再度扉idを指定する
        imageP.style.display='block';
        if(v>=7){
            v=1;
            console.log(v + 'v_1');
            clearTimeout(timer);
        }else{
            if(nameNode != 0){
                v+=1;
                console.log(v + 'v_2');
                open();
            }else{//1枚目の扉画像のみを表示
                v=1;
                console.log(v + 'v_3');
                clearTimeout(timer);
            }
        }
    },200);
}

function ikan(){
    setInterval(function(){//このsetIntervalによって、繰り返し各画像を読み込むため(getName)、ウィンドウのサイズに合わせリサイズされる
        if(j<360){//0.01秒ずつにpositionで定めた円の大きさに沿って角度を変え移動する値
            j++;
        }else{
            j=0;
        }
        for(i=0;i<7;i++){
            getName(i);
            radius=Math.sin((Math.PI/180)*j);
            position=radius*20+wH;//円の大きさを20、始りの値をwHで定めている
            if(!nameNode){
                moveTop(position,radius);
            }else{
                if(box==nameNode){
                    moveTop(wH);
                }else{
                    moveTop(position);
                }

            }
        }
    },10);
}

function getName(i){//imgを特定し、サイズ変更
    box=document.getElementById(id[i]);
    wW = $(document).width();
    wH = ((wW/16)*10)*value[i];
}

function moveTop(topPoint,val2){//各のstyle.topの位置を指定、引数に指定したpositonにより上下移動になる
    box.style.position = "absolute";
    insert = String(topPoint);
    box.style.top = insert+"px";
    bwW = $(document).width() * value2[i];
    box.style.left = bwW+"px";
    //box.style.opacity = val2+"";

}

window.onMouse = function (name,text){
    timer2 = setTimeout(function(){//0.2秒後に変数oに0を代入
        o=0;
    },200);
    nameNode=name;//onmouseoverされているimg要素を特定、初期値は0
    console.log(o +" o");
    addText(text);
    if(o==0){
        open();
    }
    o=1;
}

window.outMouse = function(name){
    l=0;
    nameNode=0;
    child=name.childNodes;//onmouseover時にappendChildされた子要素を特定
    deleteChild=child[1];//removeChildするための処理
    if(deleteChild){
        name.removeChild(child[1]);
    }
    v=1;//onMouseで呼び出したopen()で使用している変数vが7に到達しておらず、outMouseした場合に先にvに1を代入しopen()を実行することにより1枚目の画像を表示させる
    for(var i=1; i<8; i++){//open()がv=7で正常終了している場合、outMouseのタイミングで1枚目の画像を表示させる処理
        element[i].style.display='none';//一度全てdisplay:none;を指定し、意図的に表示させない
    }
    element[1].style.display='block';
    /*
    if(o==0){
        open();
    }
    */
}

function addText(text){
    if(l==0){
        var element=document.createElement("div");
        element.id = "id";
        element.innerHTML=text;
        element.style.textAlign="center";
        element.style.color="gray";
        if(text=="white"){
            element.style.color="black";
        }
        element.style.backgroundColor = text;
        element.style.width = "110px";
        var objBody =  nameNode;//onmouseoverされているimg要素を特定、初期値は0
        objBody.appendChild(element);
        l=1;
    }
}

function back_image(){
    ELEM_WIDTH = window.innerWidth;
    ELEM_HEIGHT = (ELEM_WIDTH/16)*10;
    for(var i=1; i<8; i++){
        element[i] = document.getElementById('element'+i);//扉idを指定し、読み込む
        element[i].style.width = ELEM_WIDTH+"px";
        element[i].style.height = ELEM_HEIGHT+"px";
     }
     //headerDiv = document.getElementById('header');
     //headerDiv.style.width = ELEM_WIDTH+"PX";
}

var resizeTimer;
window.addEventListener('resize', function(event){//img扉のリサイズのため設定

    if (resizeTimer !== false){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function(){
        ELEM_WIDTH = window.innerWidth;
        ELEM_HEIGHT = (ELEM_WIDTH/16)*10;
        for(var i=1; i<8; i++){
            //var element = document.getElementById('element'+i);//扉idを指定し、読み込む
            element[i].style.width = ELEM_WIDTH+"px";
            element[i].style.height = ELEM_HEIGHT+"px";
         }
         headerDiv = document.getElementById('header');
         headerDiv.style.width = ELEM_WIDTH+"PX";
         //ikan();
    },1);
});
<div class="content">
<!-- 扉を開くスクリプトを呼び出す # -->
<img src="./img/door_1.jpg" id="element1" />
<img src="./img/door_2.jpg" id="element2" />
<img src="./img/door_3.jpg" id="element3" />
<img src="./img/door_4.jpg" id="element4" />
<!-- # 扉を開くスクリプトを呼び出す ここまで -->

<p class="tap01" id="tap01" onMouseover="onMouse(this,'ページ1');" onMouseout="outMouse(this);"><a href="./page01/">ページ01に飛ぶ</a></p>
<p class="tap02" id="tap02" onMouseover="onMouse(this,'ページ2');" onMouseout="outMouse(this);"><a href="./page02/">ページ02に飛ぶ</a></p>
<p class="tap03" id="tap03" onMouseover="onMouse(this,'ページ3');" onMouseout="outMouse(this);"><a href="./page03/">ページ03に飛ぶ</a></p>
</div>

※CSSは割愛させていただきます。

ご教示お願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/23 14:03

    では、pを外してaだけにした場合はどうですか?

    キャンセル

  • Leon-Lionking

    2018/07/24 11:34

    同じ現象になります。

    キャンセル

  • easy_no_easy

    2018/08/02 08:25

    touchstart => click でもだめですか??

    キャンセル

回答 2

0

aタグのクリックイベントを無効にして、タッチイベントを使用してください。
参考URL

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/25 14:31

    clickイベントを無効にして、touchイベントにしたら、飛びますが…

    扉を開くスクリプトが動きません。

    キャンセル

0

JSには疎いので,ソースコードは全く読んでいませんが,
質問文を読む限りだと,CSSだけで十分実装できそうなので,ヒント(擬似クラスの活用)を投稿しておきます


例えば以下のようなCSSを適用すると,

.the_btn{
  border: 1px solid gray;
}

.the_btn:hover,
.the_btn:active{
  background: skyblue;
  transition: .5s;
}

the_btnクラスを与えられた要素にマウスオン(:hover)した際と,クリック/タップ(:active)した際の両方に同じアニメーション(背景色の変更)が適用されます

もし,スマホの場合のみこのような動作にしたいということであれば,JSでブラウザのUserAgentを判定し,スマホの場合にCSSを追加するようにすればよいです


擬似クラスには他にも,:link:visited:focus:nth-child, ...などなど沢山あります

特に,aタグによく適用される「:link,visited,:hover,:active」は,LoVe & HAte(愛と憎しみ)の順番で配置することになっています
(∵CSSは上から順番に適用されるので,この順番にしないと,正しく動かないことがあります)


尚,「扉が開く」などの複雑なアニメーションも,現行版のCSSなら実装可能です

上記サイトを参考にしながら回転・変形系のプロパティを設定したり,擬似要素(例:::before)を使ったりすることで,扉を再現できるのではないでしょうか

(ブラウザ毎の解釈の違いには少し注意が必要ですが,いずれ解消されるか,ベストプラクティスが集積されていくでしょう)


元々のアプローチとは全くことなる方法ではありますが,CSSだけでも,かなり様々なことができるようになってきているので,もし良ければお試しください^^

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17518questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9567questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    7108questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。