JavaScript - touchstart 在 iPhone 上不起作用

Posted 2023-03-11

【中文标题】JavaScript - touchstart 在 iPhone 上不起作用

【英文标题】：JavaScript - touchstart not working on iPhone

【发布时间】：2016-07-20 00:14:20

【问题描述】：

当点击<a> 时，只需一个简单的 javascript 来调整 div 的大小。在我的 iPhone 上似乎无法使用。

从一个简单的链接开始：

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

将 div 扩展到全屏并显示内容。在那个 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 Ed 在桌面上完美运行。在响应式设计模式下，启用Simulate touch events。在我的移动设备上似乎不起作用:-(

我按下按钮，没有任何反应。有什么想法吗？

【问题讨论】：

a) 更好的语义是使用<button> 元素； b) 尝试onclick 而不是onfocus。

【参考方案1】：

当一个元素准备好接受键盘输入时，它是“聚焦”的，我想你可能想要onclick。

另外，如果您没有链接到另一个页面，您可能需要一个按钮。所以你的 html 看起来像这样：

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

这会奏效，但我们可以做得更好。如果您这样做，您需要在您的按钮之前定义menu 和revert 函数。这意味着您需要在 DOM 之前加载 JavaScript，这意味着您的 JavaScript 无法引用 DOM。

最好把你的 JavaScript 放在你所有的 DOM 都被加载并在那里绑定你的事件，像这样：

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>    

你会看到很多糟糕的信息告诉你在执行此操作之前需要等待一些 domloaded 事件，或者将所有内容包装在 $( document ).ready() 中。只要您的 JavaScript 出现在页面底部，这都是不正确的。