JavaScript - Touchstart funktioniert nicht auf dem iPhone

Question

Nur ein einfaches JavaScript, um die Größe eines div zu ändern, wenn auf <a> geklickt wird. Scheint nicht auf meinem iPhone zu funktionieren.

beginnt mit einem einfachen Link:

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

, die ein div auf Vollbild und zeigt den Inhalt erweitert. Innerhalb dieses div,

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

und die 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> 

funktioniert perfekt auf dem Desktop, mit Firefox Dev Ed. im Responsive Design-Modus, mit Simulate touch events aktiviert. Scheine nicht :-(auf meinem Mobilgerät zu arbeiten

Ich drückte auf den Knopf und nichts passiert. Irgendwelche Ideen?

Answer 1

Ein Element ist ‚konzentriert‘, wenn er bereit ist, Tastatureingaben zu akzeptieren, ich glaube, Sie .. statt wahrscheinlich onclick wollen

auch Sie wahrscheinlich eine Schaltfläche wollen, wenn Sie nicht zu einer anderen Seite verknüpfen So Ihre HTML würde wie folgt aussehen:

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

das funktionieren wird, aber wir können es besser machen Wenn Sie dies tun, müssen Siehaben 10 und revert Funktionen definiert vor Ihre Tasten. Das bedeutet, dass Sie Ihr JavaScript vor dem DOM laden müssen, was bedeutet, dass Ihr JavaScript nicht auf das DOM verweisen kann.

Besser Ihr JavaScript setzen nach alle DOM geladen und Ihre Veranstaltungen binden es, etwa so:

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>

Sie viele schlechte Informationen sehen da draußen sagen Sie dass Sie auf ein domloaded Ereignis warten müssen, bevor Sie das tun, oder alles in $(document).ready() umbrechen. Das ist alles falsch, solange Ihr JavaScript am Ende der Seite erscheint.