使 onclick 在 iphone 上工作答案

【问题标题】：Make onclick work on iphone使 onclick 在 iphone 上工作
【发布时间】：2013-09-25 17:05:05
【问题描述】：

我一直在我的 javascript 中使用“onclick”，但现在我希望它也能在 Iphone 上运行。对于支持 ontouchstart 的设备，是否有一种简单的方法可以让所有“onclick”像 ontouchstart 一样工作？

或者我是否需要将所有脚本编写两次（一次使用 onclick，另一次使用 ontouchstart）？ :S

注意：我不想使用 jquery 或任何其他库。

<!DOCTYPE html>
<title>li:hover dropdown menu on mobile devices</title>
<script>
window.onload = function () {
    if ('ontouchstart' in window) {
        // all "onclick" should work like "ontouchstart" instead
    }
    document.getElementById('hbs').onclick = function () {
        alert('element was clicked');
    }
}
</script>
<a id=id1 href=#>button</a>

【问题讨论】：

不会自动点击触摸屏调度click事件？
好点，谢谢:)
@Pavlo：不，iOS 设备（iPhone、iPad 等）不会点击。

标签： javascript

【解决方案1】：

这个帖子比较受关注，所以我再补充一个常用的，更新的，技巧：

// First we check if you support touch, otherwise it's click:
let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';

// Then we bind via thát event. This way we only bind one event, instead of the two as below
document.getElementById('hbs').addEventListener(touchEvent, someFunction);

// or if you use jQuery:
$('#hbs').on(touchEvent, someFunction);

let touchEvent 应在 javascript 的顶部声明为函数外（也不在 document.ready 中）。这样你就可以在你的所有 javascript 中使用它。这也允许简单的 (jQuery) 使用。

旧答案：

这解决了复制代码的需要（至少至少是这样）。不知道你能不能把它们结合起来

function someFunction() {
    alert('element was clicked');
}

document.getElementById('hbs').onclick = someFunction;
document.getElementById('hbs').ontouchstart= someFunction;

document.getElementById('hbs')
    .addEventListener('click', someFunction)
    .addEventListener('touchstart', someFunction);

【讨论】：

我会把它倒过来做var touchEvent = 'onclick' in window ? 'click' : 'touchstart';。否则，对于触摸屏笔记本电脑，点击将不起作用。
如果这样做，当有人触摸屏幕时，ontouch 可能不起作用。我建议你测试一个虚拟代码并将结果放在这里
是的，你是对的。虽然经过更多的挖掘，如果有问题的元素在其上设置了cursor: pointer stackoverflow.com/a/4910962/596639，似乎点击事件在 iphone 上有效。

【解决方案2】：

javascript 在 Safari 中无法在 iPhone 上运行的原因是 iPhone 可以选择关闭 Javascript。

转到“设置” 然后向下滚动到“Safari” 然后一直滚动到底部的“高级” 然后打开Javascript！

此外，您可以使用此代码检查是否启用了 Javascript：

<script type="text/javascript">
   document.write("Javascript is working.")
</script>

<noscript>JavaScript is DISABLED!!!!!!</noscript>

【讨论】：