JavaScript - touchstartがiPhoneで動作しない

Question

<a>がクリックされたときにdivをサイズ変更するための単なるJavaScript。私のiPhoneで動作しないようです。フルスクリーンやディスプレイのコンテンツへのdivを展開し

<a href="#" onfocus="menu()">MENU</a> 

：シンプルなリンクと

開始。そのdivの内側に、

<a href="#" onfocus="revert()">close</a> 

そして、JS：

<script> 
     var headerHeight = document.getElementById("header_container").clientHeight; 
     function menu() { 
      document.getElementById("nav_container").style = "display:block;"; 
      document.getElementById("header_container").style = "height:100%"; 
      document.getElementById("header").style = "height:100%"; 
     } 
     function revert(){ 
      document.getElementById("nav_container").style = "display:none;"; 
      document.getElementById("header_container").style = "height:"+headerHeight+";"; 
      document.getElementById("header").style = "height:"+headerHeight+";"; 
     } 
</script> 

のFirefoxのDevエドを使用して、デスクトップ上で完璧に動作

。応答設計モードでは、Simulate touch eventsが有効です。任意のアイデア。私はボタンを押すと、何も起こりません

:-(私のモバイルデバイス上で動作するようには思えない？

Answer 1

要素は、それがキーボード入力を受け入れる準備ができたときに、私はあなたを考える「集中」されます。。おそらくonclickをしたいの代わりにも

、あなたはおそらく、ボタンをしたいあなたは別のページにリンクしていないのであれば、あなたのHTMLは次のようになります。

<button onclick="menu()">MENU</button> 
<button onclick="revert()">close</button> 

動作しますが、私たちはより良い行うことができますあなたがこれを行う場合、あなたはを持っている必要があります10およびrevertファンクションがの前に定義されています。ボタン。つまり、DOMの前にJavaScriptをロードする必要があります。つまり、JavaScriptがDOMを参照できません。

が後、すべてのDOMがロードされているJavaScriptのを入れて、そのように、そこにあなたのイベントをバインドするより良い：あなたはあなたを伝えるそこに悪い情報がたくさん表示されます

function menu() { 
 
    document.getElementById("msg").innerHTML = 'Showing menu'; 
 
} 
 

 
function revert(){ 
 
    document.getElementById("msg").textContent = 'Not showing menu'; 
 
} 
 

 
// bind all events 
 
document.getElementById('open-menu-button').addEventListener('click', menu); 
 
document.getElementById('close-menu-button').addEventListener('click', revert);

<button id="open-menu-button">MENU</button> 
 
<button id="close-menu-button">close</button> 
 
<div id="msg"></div>

これを行う前にいくつかのロードされたイベントを待つ必要があるか、すべてを$(document).ready()にラップしてください。あなたのJavaScriptがページの一番下に来る限り、それは間違いありません。