iPhone にタップすると何故か2回押さないとページ遷移してしまいます。
前提・実現したいこと
実行したい内容
・iPhone タップ1回だけでページ遷移したい
・onMouseover を onTouchstart に切り替えると、タップ1回はページ遷移できますが、扉が開く動作が作動しません。
他のサイトを見て試したこと
スマホでもPCと同じマウスオーバーの効果を与える方法|猫の手相
一部改変してあります。
javascript
1var linkTouchStart = function(){ 2 thisAnchor = $(this); 3 touchPos = thisAnchor.offset().top; 4 moveCheck = function(){ 5 nowPos = thisAnchor.offset().top; 6 if(touchPos == nowPos){ 7 thisAnchor.addClass("link"); 8 } 9 } 10 setTimeout(moveCheck,100); 11} 12var linkTouchEnd = function(){ 13 thisAnchor = $(this); 14 hoverRemove = function(){ 15 thisAnchor.removeClass("link"); 16 } 17 setTimeout(hoverRemove,500); 18} 19 20$(document).on('touchstart onmouseover','a',linkTouchStart); 21$(document).on('touchend onmouseout','a',linkTouchEnd);
該当のソースコード
javascript
js
1(function($){ 2window.onload=function(){ 3 j=0; //角度 4 wH=0; //立幅 5 l=0; //onMouseover時にappendChildされた子要素が追加されると1、remove=0 6 nameNode=0;//onmouseoverされているimg要素を特定、初期値は0 7 o=0; 8 id=["tap01","tap02","page03"];//のid 9 value=[0.90,0.28,0.45]; //画像の位置の初期値 10 value2=[0.35,0.50,0.35]; //画像の位置の初期値 11 v = 1;//扉画像を切り替えるための変数 12 var timer; 13 element = new Array; //back_image()で使用、扉idを指定し、格納する配列 14 ikan(); 15 back_image(); 16 open(); 17} 18 19function open(){ 20 timer = setTimeout(function(){ 21 for(var i=1; i<8; i++){ 22 //var element = document.getElementById('element'+i);//扉idを指定し、読み込む 23 element[i].style.display='none';//一度全てdisplay:none;を指定し、意図的に表示させない 24 } 25 imageP = document.getElementById('element'+v);//切り替えるための変数を添え字として、再度扉idを指定する 26 imageP.style.display='block'; 27 if(v>=7){ 28 v=1; 29 console.log(v + 'v_1'); 30 clearTimeout(timer); 31 }else{ 32 if(nameNode != 0){ 33 v+=1; 34 console.log(v + 'v_2'); 35 open(); 36 }else{//1枚目の扉画像のみを表示 37 v=1; 38 console.log(v + 'v_3'); 39 clearTimeout(timer); 40 } 41 } 42 },200); 43} 44 45function ikan(){ 46 setInterval(function(){//このsetIntervalによって、繰り返し各画像を読み込むため(getName)、ウィンドウのサイズに合わせリサイズされる 47 if(j<360){//0.01秒ずつにpositionで定めた円の大きさに沿って角度を変え移動する値 48 j++; 49 }else{ 50 j=0; 51 } 52 for(i=0;i<7;i++){ 53 getName(i); 54 radius=Math.sin((Math.PI/180)*j); 55 position=radius*20+wH;//円の大きさを20、始りの値をwHで定めている 56 if(!nameNode){ 57 moveTop(position,radius); 58 }else{ 59 if(box==nameNode){ 60 moveTop(wH); 61 }else{ 62 moveTop(position); 63 } 64 65 } 66 } 67 },10); 68} 69 70function getName(i){//imgを特定し、サイズ変更 71 box=document.getElementById(id[i]); 72 wW = $(document).width(); 73 wH = ((wW/16)*10)*value[i]; 74} 75 76function moveTop(topPoint,val2){//各のstyle.topの位置を指定、引数に指定したpositonにより上下移動になる 77 box.style.position = "absolute"; 78 insert = String(topPoint); 79 box.style.top = insert+"px"; 80 bwW = $(document).width() * value2[i]; 81 box.style.left = bwW+"px"; 82 //box.style.opacity = val2+""; 83 84} 85 86window.onMouse = function (name,text){ 87 timer2 = setTimeout(function(){//0.2秒後に変数oに0を代入 88 o=0; 89 },200); 90 nameNode=name;//onmouseoverされているimg要素を特定、初期値は0 91 console.log(o +" o"); 92 addText(text); 93 if(o==0){ 94 open(); 95 } 96 o=1; 97} 98 99window.outMouse = function(name){ 100 l=0; 101 nameNode=0; 102 child=name.childNodes;//onmouseover時にappendChildされた子要素を特定 103 deleteChild=child[1];//removeChildするための処理 104 if(deleteChild){ 105 name.removeChild(child[1]); 106 } 107 v=1;//onMouseで呼び出したopen()で使用している変数vが7に到達しておらず、outMouseした場合に先にvに1を代入しopen()を実行することにより1枚目の画像を表示させる 108 for(var i=1; i<8; i++){//open()がv=7で正常終了している場合、outMouseのタイミングで1枚目の画像を表示させる処理 109 element[i].style.display='none';//一度全てdisplay:none;を指定し、意図的に表示させない 110 } 111 element[1].style.display='block'; 112 /* 113 if(o==0){ 114 open(); 115 } 116 */ 117} 118 119function addText(text){ 120 if(l==0){ 121 var element=document.createElement("div"); 122 element.id = "id"; 123 element.innerHTML=text; 124 element.style.textAlign="center"; 125 element.style.color="gray"; 126 if(text=="white"){ 127 element.style.color="black"; 128 } 129 element.style.backgroundColor = text; 130 element.style.width = "110px"; 131 var objBody = nameNode;//onmouseoverされているimg要素を特定、初期値は0 132 objBody.appendChild(element); 133 l=1; 134 } 135} 136 137function back_image(){ 138 ELEM_WIDTH = window.innerWidth; 139 ELEM_HEIGHT = (ELEM_WIDTH/16)*10; 140 for(var i=1; i<8; i++){ 141 element[i] = document.getElementById('element'+i);//扉idを指定し、読み込む 142 element[i].style.width = ELEM_WIDTH+"px"; 143 element[i].style.height = ELEM_HEIGHT+"px"; 144 } 145 //headerDiv = document.getElementById('header'); 146 //headerDiv.style.width = ELEM_WIDTH+"PX"; 147} 148 149var resizeTimer; 150window.addEventListener('resize', function(event){//img扉のリサイズのため設定 151 152 if (resizeTimer !== false){ 153 clearTimeout(resizeTimer); 154 } 155 resizeTimer = setTimeout(function(){ 156 ELEM_WIDTH = window.innerWidth; 157 ELEM_HEIGHT = (ELEM_WIDTH/16)*10; 158 for(var i=1; i<8; i++){ 159 //var element = document.getElementById('element'+i);//扉idを指定し、読み込む 160 element[i].style.width = ELEM_WIDTH+"px"; 161 element[i].style.height = ELEM_HEIGHT+"px"; 162 } 163 headerDiv = document.getElementById('header'); 164 headerDiv.style.width = ELEM_WIDTH+"PX"; 165 //ikan(); 166 },1); 167}); 168 169
html
1<div class="content"> 2<!-- 扉を開くスクリプトを呼び出す # --> 3<img src="./img/door_1.jpg" id="element1" /> 4<img src="./img/door_2.jpg" id="element2" /> 5<img src="./img/door_3.jpg" id="element3" /> 6<img src="./img/door_4.jpg" id="element4" /> 7<!-- # 扉を開くスクリプトを呼び出す ここまで --> 8 9<p class="tap01" id="tap01" onMouseover="onMouse(this,'ページ1');" onMouseout="outMouse(this);"><a href="./page01/">ページ01に飛ぶ</a></p> 10<p class="tap02" id="tap02" onMouseover="onMouse(this,'ページ2');" onMouseout="outMouse(this);"><a href="./page02/">ページ02に飛ぶ</a></p> 11<p class="tap03" id="tap03" onMouseover="onMouse(this,'ページ3');" onMouseout="outMouse(this);"><a href="./page03/">ページ03に飛ぶ</a></p> 12</div>
※CSSは割愛させていただきます。
ご教示お願い致します。